HTML mit CSS und JS Kalender

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Hallo ihr Lieben!

Ich habe ein Problem mit meiner neu geschriebenen HTML Seite. Ich bin so weit fertig (fürs Forum habe ich Dummy Einträge erstellt!) Nur funktioniert der Kalender nicht. Der Kalender ist mit CSS und JS geschrieben (alle Dateien im Anhang!). Dort wo der Kalender erscheinen sollte kommt nur der "Header" und das wars. Ich bin mit meinem Latein am ende und kommt einfach nicht mehr weiter. Ich hoffe ihr könnt mir helfen.

glg Puschl
 

Anhänge

  • HTML_mit_Kalender.zip
    248,2 KB · Aufrufe: 4

m.scatello

Senior HTML'ler
15 Februar 2017
1.657
195
63
alle Dateien im Anhang!
Und damit haben wir ein Problem. Es wird sich kaum jemand die Zip-Datei downloaden, auf seinem Rechner entpacken und dann den Fehler suchen. Poste einen Link zur Seite und falls diese noch nicht online ist, ändere das, zur Not bei einem Freehoster.
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Nunja die kommt so nicht Online da Sie intern in der Firma betrieben wird. Daher habe ich die Files zur Verfügung gestellt.

Ich kann auch gerne alle Files hier als Kommentar einfügen. Bzw. hier einmal die Index.html solltet ihr die anderen Files auch gerne sehen wollen kann ich diese hier auch so Posten.

index.html
<!DOCTYPE html> <html lang="de"> <head> <title>Seitenname</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { color: #000; background: #fff; font-family: "Verdana"; } /* Responsive layout - Media*/ @media (prefers-color-scheme: dark) { body { color: #fff; background: #222; } } /* Style the header */ .header { background-color: #222; padding: 20px; text-align: center; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #000000; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #da291c; color: white; } /* Create three equal columns that floats next to each other */ .column1 { float: left; width: 60%; padding: 10px; } /* Create three equal columns that floats next to each other */ .column2 { float: left; width: 40%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /*ASIDE*/ .aside { float: left; height: 50%; padding: 10px; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { .column { width: 100%; } } </style> <!--Bootstrap JS, Popper.js, and jQuery--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" type="text/javascript"></script>--> <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/javascript"></script>--> <link rel="stylesheet" href="Script/semantic.min.css" type="text/css"> <script href="Script/jquery.min.js" type="text/javascript"></script> <script src="Script/moment.min.js" type="text/javascript"></script> <link rel="stylesheet" href="Script/fullcalendar.min.css" type="text/css"> <script src="Script/fullcalendar.min.js" type="text/javascript"></script> <script src="Script/semantic.min.js" type="text/javascript"></script> <script src="Script/switch.js" type="text/javascript"></script> <script src="Script/Kalender.js" type="text/javascript"></script> </head> <body> <div class="header"> <h1 align=center font="Verdana"><img src="Fotos/A1.png" width="80" height="80">&nbsp; Titel</h1> </div> <div class="topnav"> <a href="http://www.orf.at" target="_blank"></i><font color="YELLOW">ORF.at</font></a> <a href="" target="_blank"></a> <a href="http://www.a1.net" target="_blank"><i class="fa fa-shield"></i>A1.net</a> <a href="https://www.bild.de" target="_blank">Bild.de</a> </div> <div class="row"> <div class="column1"> <table> <tr> <th width="210" height="110"><h2>Punkt 1</h2></th> <th width="210" height="110"><h2>Punkt 2</h2></th> <th width="210" height="110"><h2>Punkt 3</h2></th> <th width="210" height="110"><h2>Punkt 4</h2></th> <th width="210" height="110"><h2>Punkt 5</h2></th> </tr> <tr> <!-- Punkt 1 --> <td><center> <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();"> <option value="">ausw&auml;hlen</option> <option value="">Punkt 1.1</option> <option value="">Punkt 1.2</option> <option value="">Punkt 1.3</option> <select></center> </td> <!-- Punkt 2 --> <td><center> <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();"> <option value="">ausw&auml;hlen</option> <option value="">Punkt 2.1</option> <option value="">Punkt 2.2</option> <option value="">Punkt 2.3</option> </select></center> </td> <!-- Punkt 3 --> <td><center> <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();"> <option value="">ausw&auml;hlen</option> <option value="">Punkt 3.1</option> <option value="">Punkt 3.2</option> <option value="">Punkt 3.3</option> </select></center> </td> <!-- Punkt 4 --> <td><center> <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();"> <option value="">ausw&auml;hlen</option> <option value="">Punkt 4.1</option> <option value="">Punkt 4.2</option> <option value="">Punkt 4.3</option> </select></center> </td> <!-- Punkt 5 --> <td><center> <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();"> <option value="">ausw&auml;hlen</option> <option value="">Punkt 5.1</option> <option value="">Punkt 5.2</option> <option value="">Punkt 5.3</option> </select></center> </td> </tr> </table> </div> <div class="column2"> <!-- Kalender --> <div class="ui container"> <div class="ui menu"> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item">Kalender</div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> <div class="header item"></div> </div> </div> <br/> <div class="ui container"> <div class="ui grid"> <div class="ui sixteen column"> <div id="calendar"></div> </div> </div> </div> </div> </div> </body> </html>
 

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
Ich muss jetzt erstmal 2 Stunden weg.
Ich kann dir aber auf der schnelle sagen, dass da einiges nicht ganz richtig ist.
Teste deine Seite mal hier
Und entferne die Fehler.
Danach kann man dir auch helfen , nur so ist da noch viel zu viel an alten HTML Code drin und halt andere Fehler.
Deine Browser Konsole schmeißt auch Fehler raus. Die auch noch beseitigen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
@Puschl wirf mal einen Blick in die Console, da findest Du eine Meldung, dass jQuery nicht definiert ist. Aktivierst Du diese Zeile:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
indem Du die Kommentarzeichen entfernst - voila, der Kalender ist da.

BTW: Wenn Du Code postest, besser nicht als Inline-Code (linkes Menü) sondern das </> im rechten Menü verwenden, sonst geht die Formatierung mit Einrückungen komplett verloren.
 
Zuletzt bearbeitet:

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Danke dir Sempervivum!
Ich bin noch am Fehler ausbessern. Sobald ich diese erledigt habe schau ich mir die Zeile an!

Ja Sorry wegen deim einfügen habe das als erstes gefunden und dachte das wird passen :(
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Das HREF hat geholfen in der Zeile <script href="Script/jquery.min.js" type="text/javascript"></script>

Jetzt zeigt er mir den Kalender an was super ist vielen dank für eure Hilfe! jetzt habe ich nur eine frage noch.
Wie kann ich die Spalten genau übereinander bekommen bzw. den Scroolbalken weg??

1634641116906.png
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Dieses CSS funktioniert bei mir, die Scrollbar verschwindet:
Code:
    <style>
        .fc-row.fc-widget-header {
            border-right-width: 0 !important;
            margin-right: 0 !important;
        }

        .fc-scroller.fc-day-grid-container {
            overflow: auto !important;
            height: auto !important;
        }
    </style>
Ich habe auch in den Optionen gesucht und height sowie contentHeight gefunden aber damit habe ich sie nicht weg bekommen.
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Dieses CSS funktioniert bei mir, die Scrollbar verschwindet:
Code:
    <style>
        .fc-row.fc-widget-header {
            border-right-width: 0 !important;
            margin-right: 0 !important;
        }

        .fc-scroller.fc-day-grid-container {
            overflow: auto !important;
            height: auto !important;
        }
    </style>
Ich habe auch in den Optionen gesucht und height sowie contentHeight gefunden aber damit habe ich sie nicht weg bekommen.
Super danke dir!!!!

Ein Theme habe ich noch dann ist es erledigt. Wenn ich jetzt die Hintergrundfarbe der Seite ändern will (Header schaffe ich, TopNav schaffe ich) bekommt diese keine neue Farbe. Nur welches Skript übersteuert die angaben im CSS??

Ich dachte die Hintergrundfarbe ändere ich in diesem Bereich


<!DOCTYPE html>
<html lang="de">
<head>
<title>A1 - Enterprise Storage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
color: #000;
background: #fff;
font-family: "Verdana";
}

/* Responsive layout - Media*/
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #222;
}
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Du bindest das Script/semantic.min.css nach deinem eigenen CSS ein, daher überschreibt es das. Ändere die Reihenfolge und es wird funktionieren.
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Du bindest das Script/semantic.min.css nach deinem eigenen CSS ein, daher überschreibt es das. Ändere die Reihenfolge und es wird funktionieren.
Meinst du so???


<!DOCTYPE html>
<html lang="de">
<head>
<title>A1 - Enterprise Storage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Script/semantic.min.css" type="text/css">
<style>
* {
box-sizing: border-box;
}

body {
color: #fff;
background: #848484;
font-family: "Verdana";
}

/* Responsive layout - Media*/
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #222;
}
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Ja genau. Ich hatte das nicht getestet, wenn es bei dir nicht funktioniert, untersuche ich es noch mal.
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Bei mir war dann die ganze Schrift weiß mit weißem Hintergrund in den Auswahlfeldern.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Hm, Schrift weiß? Bei mir ist sie schwarz und der Hintergrund weiß, genau wie durch das CSS eingestellt:
fullcalendar-bgcolor.png
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
So einen Punkt hätte ich noch den ich nicht hinbekomme :(

Wie kann ich eine Suche einbauen auf die Seite?
 

Puschl

Neues Mitglied
19 Oktober 2021
15
0
1
35
Eine suche die die ganze Homepage durchsucht, oder eine Suche die nur im Kalender sucht?
Eine die nur die Seite durchsucht der Kalender muss nicht durchsucht werden.

Dazu ist mir etwas aufgefallen. Wenn ich im Drop Down Menü etwas auswähle geht die Seite normal auf, so wie sie soll. Lediglich wenn ich die gleiche Auswahl nochmals anklicken will geht das nicht bevor ich nicht etwas anderes vorher auswähle. Könnte ich das irgendwie ändern?

GLG
 
Werbung:

Neueste Beiträge