MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Incorrect Time Display in calendar(06:00 instead of 18:00 of 06:00PM)

    Scheduled Pinned Locked Moved Troubleshooting
    8 Posts 5 Posters 3.2k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E Offline
      erikgroentje
      last edited by

      Who can help me with an isue i have with my calendar. I have an even which will take place on a sunday at 18.00 of 6PM. Instead of displaying it in either one of these ways it says my event is on this sunday at 06.00. Which in my opinion is in the morning instead of in the evening. I find this quite confusing so i was hoping if there was anybody who knows how to change this. This is my config

      /* global Module */

      /* Magic Mirror

      • Module: Calendar
      • By Michael Teeuw http://michaelteeuw.nl
      • MIT Licensed.
        */

      Module.register(“calendar”, {

      // Define module defaults
      defaults: {
      	maximumEntries: 10, // Total Maximum Entries
      	maximumNumberOfDays: 365,
      	displaySymbol: true,
      	defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
      	displayRepeatingCountTitle: false,
      	defaultRepeatingCountTitle: "",
      	maxTitleLength: 25,
      	wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
      	fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
      	animationSpeed: 2000,
      	fade: true,
      	urgency: 7,
      	timeFormat: "relative",
      	dateFormat: "Do MMM",
      	fullDayEventDateFormat: "Do MMM",
      	getRelative: 6,
      	fadePoint: 0.25, // Start on 1/4th of the list.
      	hidePrivate: false,
      	colored: false,
      	calendars: [
      		{
      			symbol: "calendar",
      			url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
      		},
      	],
      	titleReplace: {
      		"De verjaardag van ": "",
      		"'s birthday": ""
      	},
      	broadcastEvents: true,
      	excludedEvents: []
      },
      
      // Define required scripts.
      getStyles: function () {
      	return ["calendar.css", "font-awesome.css"];
      },
      
      // Define required scripts.
      getScripts: function () {
      	return ["moment.js"];
      },
      
      // Define required translations.
      getTranslations: function () {
      	// The translations for the default modules are defined in the core translation files.
      	// Therefor we can just return false. Otherwise we should have returned a dictionary.
      	// If you're trying to build your own module including translations, check out the documentation.
      	return false;
      },
      
      // Override start method.
      start: function () {
      	Log.log("Starting module: " + this.name);
      
      	// Set locale.
      	moment.locale(config.language);
      
      	switch (config.timeFormat) {
      	case 12: {
      		moment.updateLocale(config.language, {
      			longDateFormat: {
      				LT: "h:mm A"
      			}
      		});
      		break;
      	}
      	case 24: {
      		moment.updateLocale(config.language, {
      			longDateFormat: {
      				LT: "hh:mm"
      			}
      		});
      		break;
      	}
      	// If config.timeFormat was not given (or has invalid format) default to locale default
      	default: {
      		break;
      	}
      	}
      
      	for (var c in this.config.calendars) {
      		var calendar = this.config.calendars[c];
      		calendar.url = calendar.url.replace("webcal://", "http://");
      
      		var calendarConfig = {
      			maximumEntries: calendar.maximumEntries,
      			maximumNumberOfDays: calendar.maximumNumberOfDays
      		};
      
      		// we check user and password here for backwards compatibility with old configs
      		if(calendar.user && calendar.pass){
      			calendar.auth = {
      				user: calendar.user,
      				pass: calendar.pass
      			}
      		}
      
      		this.addCalendar(calendar.url, calendar.auth, calendarConfig);
      	}
      
      	this.calendarData = {};
      	this.loaded = false;
      },
      
      // Override socket notification handler.
      socketNotificationReceived: function (notification, payload) {
      	if (notification === "CALENDAR_EVENTS") {
      		if (this.hasCalendarURL(payload.url)) {
      			this.calendarData[payload.url] = payload.events;
      			this.loaded = true;
      
      			if (this.config.broadcastEvents) {
      				this.broadcastEvents();
      			}
      		}
      	} else if (notification === "FETCH_ERROR") {
      		Log.error("Calendar Error. Could not fetch calendar: " + payload.url);
      	} else if (notification === "INCORRECT_URL") {
      		Log.error("Calendar Error. Incorrect url: " + payload.url);
      	} else {
      		Log.log("Calendar received an unknown socket notification: " + notification);
      	}
      
      	this.updateDom(this.config.animationSpeed);
      },
      
      // Override dom generator.
      getDom: function () {
      
      	var events = this.createEventList();
      	var wrapper = document.createElement("table");
      	wrapper.className = "small";
      
      	if (events.length === 0) {
      		wrapper.innerHTML = (this.loaded) ? this.translate("EMPTY") : this.translate("LOADING");
      		wrapper.className = "small dimmed";
      		return wrapper;
      	}
      
      	for (var e in events) {
      		var event = events[e];
      
      		var excluded = false;
      		for (var f in this.config.excludedEvents) {
      			var filter = this.config.excludedEvents[f];
      			if (event.title.toLowerCase().includes(filter.toLowerCase())) {
      				excluded = true;
      				break;
      			}
      		}
      
      		if (excluded) {
      			continue;
      		}
      
      		var eventWrapper = document.createElement("tr");
      
      		if (this.config.colored) {
      			eventWrapper.style.cssText = "color:" + this.colorForUrl(event.url);
      		}
      
      		eventWrapper.className = "normal";
      
      		if (this.config.displaySymbol) {
      			var symbolWrapper = document.createElement("td");
      			symbolWrapper.className = "symbol align-right";
      			var symbols = this.symbolsForUrl(event.url);
      			if(typeof symbols === "string") {
      				symbols = [symbols];
      			}
      
      			for(var i = 0; i < symbols.length; i++) {
      				var symbol = document.createElement("span");
      				symbol.className = "fa fa-" + symbols[i];
      				if(i > 0){
      					symbol.style.paddingLeft = "5px";
      				}
      				symbolWrapper.appendChild(symbol);
      			}
      			eventWrapper.appendChild(symbolWrapper);
      		}
      
      		var titleWrapper = document.createElement("td"),
      			repeatingCountTitle = "";
      
      		if (this.config.displayRepeatingCountTitle) {
      
      			repeatingCountTitle = this.countTitleForUrl(event.url);
      
      			if (repeatingCountTitle !== "") {
      				var thisYear = new Date(parseInt(event.startDate)).getFullYear(),
      					yearDiff = thisYear - event.firstYear;
      
      				repeatingCountTitle = ", " + yearDiff + ". " + repeatingCountTitle;
      			}
      		}
      
      		titleWrapper.innerHTML = this.titleTransform(event.title) + repeatingCountTitle;
      
      		if (!this.config.colored) {
      			titleWrapper.className = "title bright";
      		} else {
      			titleWrapper.className = "title";
      		}
      
      		eventWrapper.appendChild(titleWrapper);
      
      		var timeWrapper = document.createElement("td");
      		//console.log(event.today);
      		var now = new Date();
      		// Define second, minute, hour, and day variables
      		var oneSecond = 1000; // 1,000 milliseconds
      		var oneMinute = oneSecond * 60;
      		var oneHour = oneMinute * 60;
      		var oneDay = oneHour * 24;
      		if (event.fullDayEvent) {
      			if (event.today) {
      				timeWrapper.innerHTML = this.capFirst(this.translate("TODAY"));
      			} else if (event.startDate - now < oneDay && event.startDate - now > 0) {
      				timeWrapper.innerHTML = this.capFirst(this.translate("TOMORROW"));
      			} else if (event.startDate - now < 2 * oneDay && event.startDate - now > 0) {
      				if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") {
      					timeWrapper.innerHTML = this.capFirst(this.translate("DAYAFTERTOMORROW"));
      				} else {
      					timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      				}
      			} else {
      				/* Check to see if the user displays absolute or relative dates with their events
      				 * Also check to see if an event is happening within an 'urgency' time frameElement
      				 * For example, if the user set an .urgency of 7 days, those events that fall within that
      				 * time frame will be displayed with 'in xxx' time format or moment.fromNow()
      				 *
      				 * Note: this needs to be put in its own function, as the whole thing repeats again verbatim
      				 */
      				if (this.config.timeFormat === "absolute") {
      					if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * oneDay))) {
      						// This event falls within the config.urgency period that the user has set
      						timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      					} else {
      						timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").format(this.config.fullDayEventDateFormat));
      					}
      				} else {
      					timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      				}
      			}
      		} else {
      			if (event.startDate >= new Date()) {
      				if (event.startDate - now < 2 * oneDay) {
      					// This event is within the next 48 hours (2 days)
      					if (event.startDate - now < this.config.getRelative * oneHour) {
      						// If event is within 6 hour, display 'in xxx' time format or moment.fromNow()
      						timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      					} else {
      						// Otherwise just say 'Today/Tomorrow at such-n-such time'
      						timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").calendar());
      					}
      				} else {
      					/* Check to see if the user displays absolute or relative dates with their events
      					 * Also check to see if an event is happening within an 'urgency' time frameElement
      					 * For example, if the user set an .urgency of 7 days, those events that fall within that
      					 * time frame will be displayed with 'in xxx' time format or moment.fromNow()
      					 *
      					 * Note: this needs to be put in its own function, as the whole thing repeats again verbatim
      					 */
      					if (this.config.timeFormat === "absolute") {
      						if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * oneDay))) {
      							// This event falls within the config.urgency period that the user has set
      							timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      						} else {
      							timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").format(this.config.dateFormat));
      						}
      					} else {
      						timeWrapper.innerHTML = this.capFirst(moment(event.startDate, "x").fromNow());
      					}
      				}
      			} else {
      				timeWrapper.innerHTML = this.capFirst(
      					this.translate("RUNNING", {
      						fallback: this.translate("RUNNING") + " {timeUntilEnd}",
      						timeUntilEnd: moment(event.endDate, "x").fromNow(true)
      					})
      				);
      			}
      		}
      		//timeWrapper.innerHTML += ' - '+ moment(event.startDate,'x').format('lll');
      		//console.log(event);
      		timeWrapper.className = "time light";
      		eventWrapper.appendChild(timeWrapper);
      
      		wrapper.appendChild(eventWrapper);
      
      		// Create fade effect.
      		if (this.config.fade && this.config.fadePoint < 1) {
      			if (this.config.fadePoint < 0) {
      				this.config.fadePoint = 0;
      			}
      			var startingPoint = events.length * this.config.fadePoint;
      			var steps = events.length - startingPoint;
      			if (e >= startingPoint) {
      				var currentStep = e - startingPoint;
      				eventWrapper.style.opacity = 1 - (1 / steps * currentStep);
      			}
      		}
      	}
      
      	return wrapper;
      },
      
      /* hasCalendarURL(url)
       * Check if this config contains the calendar url.
       *
       * argument url string - Url to look for.
       *
       * return bool - Has calendar url
       */
      hasCalendarURL: function (url) {
      	for (var c in this.config.calendars) {
      		var calendar = this.config.calendars[c];
      		if (calendar.url === url) {
      			return true;
      		}
      	}
      
      	return false;
      },
      
      /* createEventList()
       * Creates the sorted list of all events.
       *
       * return array - Array with events.
       */
      createEventList: function () {
      	var events = [];
      	var today = moment().startOf("day");
      	for (var c in this.calendarData) {
      		var calendar = this.calendarData[c];
      		for (var e in calendar) {
      			var event = calendar[e];
      			if(this.config.hidePrivate) {
      				if(event.class === "PRIVATE") {
      					  // do not add the current event, skip it
      					  continue;
      				}
      			}
      			event.url = c;
      			event.today = event.startDate >= today && event.startDate < (today + 24 * 60 * 60 * 1000);
      			events.push(event);
      		}
      	}
      
      	events.sort(function (a, b) {
      		return a.startDate - b.startDate;
      	});
      
      	return events.slice(0, this.config.maximumEntries);
      },
      
      /* createEventList(url)
       * Requests node helper to add calendar url.
       *
       * argument url string - Url to add.
       */
      addCalendar: function (url, auth, calendarConfig) {
      	this.sendSocketNotification("ADD_CALENDAR", {
      		url: url,
      		maximumEntries: calendarConfig.maximumEntries || this.config.maximumEntries,
      		maximumNumberOfDays: calendarConfig.maximumNumberOfDays || this.config.maximumNumberOfDays,
      		fetchInterval: this.config.fetchInterval,
      		auth: auth
      	});
      },
      
      /* symbolsForUrl(url)
       * Retrieves the symbols for a specific url.
       *
       * argument url string - Url to look for.
       *
       * return string/array - The Symbols
       */
      symbolsForUrl: function (url) {
      	return this.getCalendarProperty(url, "symbol", this.config.defaultSymbol);
      },
      
      /* colorForUrl(url)
       * Retrieves the color for a specific url.
       *
       * argument url string - Url to look for.
       *
       * return string - The Color
       */
      colorForUrl: function (url) {
      	return this.getCalendarProperty(url, "color", "#fff");
      },
      
      /* countTitleForUrl(url)
       * Retrieves the name for a specific url.
       *
       * argument url string - Url to look for.
       *
       * return string - The Symbol
       */
      countTitleForUrl: function (url) {
      	return this.getCalendarProperty(url, "repeatingCountTitle", this.config.defaultRepeatingCountTitle);
      },
      
      /* getCalendarProperty(url, property, defaultValue)
       * Helper method to retrieve the property for a specific url.
       *
       * argument url string - Url to look for.
       * argument property string - Property to look for.
       * argument defaultValue string - Value if property is not found.
       *
       * return string - The Property
       */
      getCalendarProperty: function (url, property, defaultValue) {
      	for (var c in this.config.calendars) {
      		var calendar = this.config.calendars[c];
      		if (calendar.url === url && calendar.hasOwnProperty(property)) {
      			return calendar[property];
      		}
      	}
      
      	return defaultValue;
      },
      
      /* shorten(string, maxLength)
       * Shortens a string if it's longer than maxLength.
       * Adds an ellipsis to the end.
       *
       * argument string string - The string to shorten.
       * argument maxLength number - The max length of the string.
       * argument wrapEvents - Wrap the text after the line has reached maxLength
       *
       * return string - The shortened string.
       */
      shorten: function (string, maxLength, wrapEvents) {
      	if (wrapEvents) {
      		var temp = "";
      		var currentLine = "";
      		var words = string.split(" ");
      
      		for (var i = 0; i < words.length; i++) {
      			var word = words[i];
      			if (currentLine.length + word.length < 25 - 1) { // max - 1 to account for a space
      				currentLine += (word + " ");
      			} else {
      				if (currentLine.length > 0) {
      					temp += (currentLine + "<br />" + word + " ");
      				} else {
      					temp += (word + "<br />");
      				}
      				currentLine = "";
      			}
      		}
      
      		return temp + currentLine;
      	} else {
      		if (string.length > maxLength) {
      			return string.slice(0, maxLength) + "…";
      		} else {
      			return string;
      		}
      	}
      },
      
      /* capFirst(string)
       * Capitalize the first letter of a string
       * Return capitalized string
       */
      
      capFirst: function (string) {
      	return string.charAt(0).toUpperCase() + string.slice(1);
      },
      
      /* titleTransform(title)
       * Transforms the title of an event for usage.
       * Replaces parts of the text as defined in config.titleReplace.
       * Shortens title based on config.maxTitleLength and config.wrapEvents
       *
       * argument title string - The title to transform.
       *
       * return string - The transformed title.
       */
      titleTransform: function (title) {
      	for (var needle in this.config.titleReplace) {
      		var replacement = this.config.titleReplace[needle];
      
      		var regParts = needle.match(/^\/(.+)\/([gim]*)$/);
      		if (regParts) {
      		  // the parsed pattern is a regexp.
      		  needle = new RegExp(regParts[1], regParts[2]);
      		}
      
      		title = title.replace(needle, replacement);
      	}
      
      	title = this.shorten(title, this.config.maxTitleLength, this.config.wrapEvents);
      	return title;
      },
      
      /* broadcastEvents()
       * Broadcasts the events to all other modules for reuse.
       * The all events available in one array, sorted on startdate.
       */
      broadcastEvents: function () {
      	var eventList = [];
      	for (var url in this.calendarData) {
      		var calendar = this.calendarData[url];
      		for (var e in calendar) {
      			var event = cloneObject(calendar[e]);
      			delete event.url;
      			eventList.push(event);
      		}
      	}
      
      	eventList.sort(function(a,b) {
      		return a.startDate - b.startDate;
      	});
      
      	this.sendNotification("CALENDAR_EVENTS", eventList);
      
      }
      

      });

      1 Reply Last reply Reply Quote 0
      • E Offline
        erikgroentje
        last edited by

        I’ve Fixed it myself! Changed the timeformat here and it worked. It now shows me 18.00

        switch (config.timeFormat) {
        case 12: {
        moment.updateLocale(config.language, {
        longDateFormat: {
        LT: “h:mm A”
        }
        });
        break;
        }
        case 24: {
        moment.updateLocale(config.language, {
        longDateFormat: {
        LT: “hh:mm”

        strawberry 3.141S M G 3 Replies Last reply Reply Quote 0
        • strawberry 3.141S Offline
          strawberry 3.141 Project Sponsor Module Developer @erikgroentje
          last edited by

          @erikgroentje this bug is already fixed and will be in the next release https://github.com/MichMich/MagicMirror/pull/943

          Please create a github issue if you need help, so I can keep track

          1 Reply Last reply Reply Quote 1
          • M Offline
            MrEdOne @erikgroentje
            last edited by MrEdOne

            @erikgroentje
            Can you show what you change?

            /// NVM i have this :D

            1 Reply Last reply Reply Quote 0
            • G Offline
              goprojojo @erikgroentje
              last edited by

              @erikgroentje What did you exactly changed in calendar.js to show 18:00 format?

              Mykle1M 1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @goprojojo
                last edited by

                @goprojojo said in Incorrect Time Display in calendar(06:00 instead of 18:00 of 06:00PM):

                What did you exactly changed in calendar.js to show 18:00 format?

                This should fix the time format for you.

                Edit your calendar.js. Find the line that says:

                longDateFormat

                Change LT: "hh:mm" to LT: “HH:mm”

                Create a working config
                How to add modules

                G 1 Reply Last reply Reply Quote 2
                • G Offline
                  goprojojo @Mykle1
                  last edited by

                  @Mykle1 Thnx. It works!

                  Mykle1M 1 Reply Last reply Reply Quote 1
                  • Mykle1M Offline
                    Mykle1 Project Sponsor Module Developer @goprojojo
                    last edited by

                    @goprojojo said in Incorrect Time Display in calendar(06:00 instead of 18:00 of 06:00PM):

                    Thnx. It works!

                    Fantastic! :^)

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy