Kalender anpassen (JS) (Erledigt)

HTMH · May 21st 2017

Ich Teste gerade ein wenig mit einem JS Kalender, für eine Box, komme aber bei zwei Sachen nicht weiter.

Wie kann ich den Kalender so umstellen das der bei Montag anfängt und nicht bei Sonntag?
Also so das die Erste Spalte Links Montag ist und die Letzte Spalte Rechts Sonntag,

ich hatte das zwar hinbekommen, aber es wurde nicht der Aktuelle Wochentag markiert,
sondern der Tag danach.

Wie kann man die Spalte Sonntag Rot darstellen.

Kalender

Wäre Nett wenn mir da jemand auch die Sprünge helfen könnte.

M.Schmitz · May 22nd 2017

Zeile 54 kannst du die Reihenfolge ändern und in Zeile

Code

if (week_day === 0) {

in

Code

if (week_day === 1) {

ändern dann sollte es passen.

Gruß

Edit* Habe gerade gesehen das es so nicht funktioniert, man kann zwar das Week Event im CSS ausblenden aber das ist nicht das was du wolltest.

Vielleicht muss es ja auch nicht dieser Kalender sein schau dir diesen mal an.

Kalender mit Erklärung

Box möglicher Kalender

HTMH · May 22nd 2017

Danke, für die Antwort, soweit war ich auch schon, das einfachste wäre es zwar die Week-Day Funktionen zu entfernen,

weil es nicht so wichtig ist, aber es geht mir mehr ums verstehen, der Funktionen.

Den Kalender hatte ich schon getestet, wie etliche andere auch, ich finden den ich z.zt. nutze am besten.

Fighter456 · May 22nd 2017

So?:

HTMH · May 22nd 2017

ja das sieht doch schon gut aus.

Wie hast du das gemacht?

M.Schmitz · May 22nd 2017

Quote from Fighter456

So?:

Ist aber auch nicht richtig, wenn ich mir den Screen so ansehe oder?

Bei dir ist Di als Wochentag markiert und aber der 21te So markiert....

HTMH · May 22nd 2017

Habe ich auch jetzt auch gesehen, aber es ist schon mal ein Anfang

Ich hänge da schon zwei Tage dran, etliche Kalender getestet,

aber irgendwo passt immer irgendetwas nicht.

Fighter456 · May 22nd 2017

Ja, ich hatte das auch nur schnell angepasst und nicht alles erwischt:

woltlab.com/attachment/126534/woltlab.com/attachment/126535/woltlab.com/attachment/126536/

Diff

diff --git a/orig.txt b/new.txt
index f3d7706..1ae4715 100644
--- a/orig.txt
+++ b/new.txt
@@ -51,8 +51,8 @@ function calendar() {
   
   // vars
   var day_of_week = new Array(
-    'So', 'Mo', 'Di',
-    'Mi', 'Do', 'Fr', 'Sa'),
+    'Mo', 'Di',
+    'Mi', 'Do', 'Fr', 'Sa', 'So'),
       month_of_year = new Array(
         'Jan', 'Feb', 'Mar',
         'Apr', 'May', 'Jun', 'Jul',
@@ -62,7 +62,7 @@ function calendar() {
       Calendar = new Date(),
       year = Calendar.getYear(),
       month = Calendar.getMonth(),
-      today = Calendar.getDate(),
+      today = Calendar.getDate() - 1,
       weekday = Calendar.getDay(),
       html = '';
   
@@ -77,7 +77,7 @@ function calendar() {
   html += '<p class="subhead_cal">' + month_of_year[month] + ' ' + Calendar.getFullYear() + '</p>';
   html += '<tr class="week_cal">';
   for (index = 0; index < 7; index++) {
-    if (weekday == index) {
+    if ((weekday - 1) == index) {
       html += '<th class="week_event">' + day_of_week[index] + '</th>';
     } else {
       html += '<th>' + day_of_week[index] + '</th>';
@@ -102,7 +102,7 @@ function calendar() {
       
       week_day = Calendar.getDay();
       
-      if (week_day === 0) {
+      if (week_day === 1) {
         html += '</tr>';
       }
       if (week_day !== 7) {
@@ -111,7 +111,7 @@ function calendar() {
         var info = (Calendar.getMonth() + 1) + '/' + day + '/' + 
         Calendar.getFullYear();
         
-        if (today === Calendar.getDate()) {
+        if ((today + 1) === Calendar.getDate()) {
           html += '<td><a class="today_cal" href="#" data-id="' + 
           info + '" onclick="return showInfo(\'' + 
           info + '\')">' +
@@ -120,12 +120,11 @@ function calendar() {
           showInfo(info);
           
         } else {
-          html += '<td><a href="#" data-id="' + 
+          html += '<td' + (day % 7 == 0 ? ' class="sunday"' : '') + '><a href="#" data-id="' + 
           info + '" onclick="return showInfo(\'' + 
           info + '\')">' +
           day + '</a></td>';
         }
-        
       }
           
       if (week_day == 7) {

Display More

Diff

diff --git a/orig.txt b/new.txt
index f986f8f..254afcb 100644
--- a/orig.txt
+++ b/new.txt
@@ -193,4 +193,14 @@ border: none;
 .hideEvent:hover{
   text-decoration:none;
   color:#f55;
-}
\ No newline at end of file
+}
+
+td.sunday > a {
+  background-color: lightcoral !important;
+  color: rgba(255,255,255,100) !important;
+}
+
+.today_cal {
+  color: rgba(255,0,0,100) !important;
+  font-weight: bold;
+}

Display More

HTMH · May 22nd 2017

Ich danke dir Vielmals, das hätte ich so nie hinbekommen.

Fighter456 · May 22nd 2017

Quote from HTMH

Ich danke dir Vielmals, das hätte ich so nie hinbekommen.

Nichts zu danken. Man hilft, wo man kann.

HTMH · May 22nd 2017

Eine Sache hätte ich noch kriegt man das hin das der Mouseover Effekt nur bei Terminen angezeigt wird und nicht bei jedem Datum?

Fighter456 · May 22nd 2017

Von was genau sprichst du? Vom Mauszeiger welcher sich beim Hovern von Einträgen ändert?

HTMH · May 22nd 2017

jup

Fighter456 · May 23rd 2017

Dazu musst du noch folgenden CSS-Code hinzufügen:

CSS

a:not(.event) {
  cursor: default;
}

HTMH · May 23rd 2017

HTMH · May 26th 2017

Hätte da noch zwei anliegen, komme da selber nicht weiter, kann man den Kalender so ändern,

das die leeren Flächen die Tage vor und nach dem Monat anzeigt, so das der der immer voll gefüllt ist,

oder ist das zu viel Aufwand?

Mir ist heute aufgefallen das der Kalender einen Termin Automatisch anzeigt, kann man zwar weg klicken,

aber wenn man die Seite Aktualisiert wird er Termin wieder angezeigt, finde ich ziemlich Nervig, kann man das

komplett abschalten?

Fighter456 · May 26th 2017

Quote from HTMH

Hätte da noch zwei anliegen, komme da selber nicht weiter, kann man den Kalender so ändern,

das die leeren Flächen die Tage vor und nach dem Monat anzeigt, so das der der immer voll gefüllt ist,

oder ist das zu viel Aufwand?

Sicher geht das, allerdings habe ich jetzt nicht vor (und auch keine Zeit) den kompletten Kalender anzupassen. Sorry.

Quote from HTMH

Mir ist heute aufgefallen das der Kalender einen Termin Automatisch anzeigt, kann man zwar weg klicken,

aber wenn man die Seite Aktualisiert wird er Termin wieder angezeigt, finde ich ziemlich Nervig, kann man das

komplett abschalten?

Da du in deinem Eingangsbeitrag von „auf die Sprünge helfen” redest. Schaue dir mal die Codezeilen ab Zeile 10 an.

HTMH · May 27th 2017

Alles klar kein Problem, werde ich mir Morgen mal anschauen.

Edit: habe in Zeile 119 showInfo(info); entfernt, und der Termin wird nicht mehr Automatisch angezeigt, hoffe das ist so Richtig.

HTMH · Jun 1st 2017

Fighter456 könntest du dir bitte den Kalender noch mal anschauen, das ist irgendwo der Wurm drin,

Edit: Kann mir echt keiner Helfen, ich hänge da schon seid Tagen dran, komme einfach nicht weiter,

habe auch andere Kalender getestet, aber bei keinen Klappt es wie es soll

Kalender anpassen (JS) (Erledigt)

Participate now!

Share