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

HTML mit CSS und JS Kalender

Puschl

Neues Mitglied
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
Werbung:
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.
 
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>
 
Werbung:
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.
 
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 :(
 
Werbung:
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
 
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;
}
}
 
Werbung:
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;
}
}
 
Werbung:
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:
Vielleicht habe ich mich auch fals Ausgedrückt.
Meine Idee wäre das wenn ich nach "XYZ" Suche dann wäre das unter dem punkt im Drop Down "ABC" und wenn ich jetzt danach suche dachte ich kann er so suchen das er den Text+den Link herausfindet und dann anzeigt und ich kann direkt darauf klicken. (Ich hoffe es ist jetzt verständlicher)
 
Grundsätzlich gibt es nur eine Seite mehr gibt es nicht und ja der hit wäre wenn ich auf den Text Klicke das der Link dann aufgeht.
 
Werbung:
Zurück
Oben