MMM-CalendarExt3

[MMRIZE]

MMM-CalendarExt3

New MagicMirror module for calendar view. (successor of MMM-CalendarExt2)

Screenshot

Concept

My previous module, MMM-CalendarExt2, was always notorious for its difficulty to use. I need a more easy and light one. So I rewrite this from scratch newly.

Features

What’s different with CX2.

• Only focusing on how it shows; Parsing is delegated to original MagicMirror module calendar. (It means the calendar module is REQUIRED to use this module.)
• Only week and month views. I found that people are rarely interested in other views on CX2. So I drop out different views.
• Respect to original MM’s hide/show mechanism. Now you can hide/show this module easily with other scheduler or control modules. (By the way, Look at this module also. - MMM-Scenes)
• No dependency on the 3rd party modules (e.g. momentJS or Luxon, etc.). This is built with pure JS and CSS only.

Main Features

• week view or month view
• locale-aware calendar
• customizing events: filtering, sorting, transforming
• multi-instance available. You don’t need to copy and rename the module. Just add one more configuration in your config.js.

DETAILS : https://github.com/MMRIZE/MMM-CalendarExt3

[luisestrada]

@MMRIZE It took me a while to understand how to show the calendar module without the events module, it was just by not adding the position and worked like a charm :)

Thank you :), great module

[hrmax]

Great work @MMRIZE ! I like how this calendar looks much better.

I am having an issue with the eventTransformer though. I can’t seem to get it to update any of the event properties.

Is it possible to use the same symbols/icons as set in the calendar module?

[hrmax]

{
   module: "MMM-CalendarExt3",
   position: "bottom_center",
   title: "",
   config: {
     mode: "month",
     instanceId: "basicCalendar",
     minimalDaysOfNewYear: 1,
     maxEventLines: 5,
     firstDayOfWeek: 0,
     eventFilter: (ev) => {
       if (ev.title.isFullday) return false
       return true
     },
     eventTransformer: (ev) => {
         if (ev.title.search('a') > -1)  ev.title = 'test'
         return event
     },
}

[MMRIZE]

@hrmax
First, Thanks for the feedback. I found there was some mistype in code. I fixed it, so update with git pull.

Second, for eventFilter

eventFilter: (ev) => {
  if (ev.isFullday) return false
  return true
},

Third, for eventTransformer and symbol example.

eventTransformer: (ev) => {
  ev.title = `<i class="fa fa-${ev.symbol}"></i>${ev.title}`
  return ev
},

Result;

[hrmax]

@MMRIZE This was super helpful, thank you! It resolved the issues I was having.

I ended up modifying MMM-CalendarExt3.js so that I could better control the time format. Since I’m using this in portrait mode, I don’t much space so for time values I wanted

4:00 PM -> 4
5:30 PM -> 5:30

[MMRIZE]

@hrmax

You can adjust eventTimeOptions to format the time or date of the event.
But not by condition.

eventTimeOptions: {
  hour: "numeric",
}

will show only hour like 4

or

eventTimeOptions: {
  hour: "numeric",
  minute : "2-digit"
}

will show the hour and minute like 4:05

or

eventTimeOptions: {
  timeStyle: "short"
}

will show standard locale format like 4:05 am. (It depends on which locale is applied.)

But not conditionally. (4 or 4:05 by condition)

One possible idea is;
Hide the real time parts with CSS, then transform event title to include time;

/* In your custom.css */
.CX3 .myTime {
  font-size: 80%;
  color: #999;
  font-weight: normal;
}

.CX3 .event:not(.fullday) .eventTime {
  display: none;
}

/* In your config */
eventTransformer: (ev) => {
  if (!ev.isFullday) {
    let t = new Date(ev.startDate)
    let time = (t.getMinutes() === 0) ? String(t.getHours()) : String(t.getHours() + ':' + t.getMinutes())
    ev.title = `<span class="myTime">${time}</span> ${ev.title}`	
  }
  return ev 
}

The result will be;

[hrmax23]

@MMRIZE

This is a much more elegant solution than what I came up with. Many thanks!

[Assassins]

Will it be possible to pull out the birthday that is associated with a contact person from icloud. ???

[luisestrada]

@MMRIZE , just a note. I also use the browser to open the mirror and works in all platforms I’ve tested except one, Tizen browser (Samsung TVs). All modules work but this, no idea what happens but probably any form of javascript may not be supported by Tizen.

I’m quite happy with the module though

[MMRIZE]

@Assassins

Will it be possible to pull out the birthday that is associated with a contact person from cloud. ???

AFAIK, impossible (at least, no automatic way);

First; This module is not for parsing calendar events but for showing events already parsed. It means other ics format parser (like the original default calendar module) has to do that work.

Second, The birthday calendar of iCloud contacts is not a general calendar which could be sharable. If you want to export the contact birthday to any normal calendar; export the contacts as VCONTACT(.vcf) format, then convert it to VEVENT(.ics) then import them to your target calendar. But I’m not sure there is any convenient converter for this job.

[MMRIZE]

@luisestrada
Tizen is using Chromium nowadays, but the version is a bit old. The latest Tizen 6.5(Model 2022) is still using M85. (Current the newest Chromium is M100, M85 was 2-years ago). And if your Samsung TV has some age, It probably is too old to run the modern JS features. (Model 2021 => M76, Model2020=>M69, …)

[hrmax23]

@MMRIZE Is there a way to show a rolling 4/5 week in the month mode? Basically something like -1 week to +3 weeks rather than showing basically the current month until that month is over.

Also, is there a trick to get the calendar to re-render completely on some interval? On my MM right now, it’s currently showing the current day in the 5th week (i.e. still showing April as the current month). If I restart MM, it will update to show May as current month, but doesn’t seem to do it automatically. I only have 1 scene so not using MMM-Scenes.

[MMRIZE]

@hrmax23
It sounds unexpected bug. Can you show(or send mail) the screenshot and config?

[MMRIZE]

@hrmax23 said in MMM-CalendarExt3:

Is there a way to show a rolling 4/5 week in the month mode? Basically something like -1 week to +3 weeks rather than showing basically the current month until that month is over.

I will consider that option.

it’s currently showing the current day in the 5th week (i.e. still showing April as the current month). If I restart MM, it will update to show May as current month, but doesn’t seem to do it automatically.

This seems unexpected behaviour. I need your configuration to represent it.

Also, is there a trick to get the calendar to re-render completely on some interval?

I think notification CX3_MOVE_CALENDAR with payload {step:0} would refresh current view , but it needs emission from other module.
Anyway, the view is refreshed by schedule of original calendar fetch. So I don’t think it needs self-refresh timer. And when we solve above unexpected behaviour, you don’t need self-refreshing.

[hrmax23]

@MMRIZE sometime yesterday the calendar finally refreshed so that May is the current month so it appears to have resolved itself. I’m not sure what would have finally triggered it but I’ll check my calendar settings.

Thanks for considering the rolling 5 week idea!

[BKeyport]

@MMRIZE

Well, shoot, here I am waiting for a new Daily and current view. 😢

If I could get the built in calendar to do what I want it to do, I’d be using that.

[luisestrada]

@MMRIZE Thank you for your answer. :)

Another question, where does this take the Spanish translation from? For some reason the number is not separated from the text.

It says “9de Mayo” instead or “9 de Mayo”

[MMRIZE]

@luisestrada

This might be a help.

/* In your custom.css */
.CX3 .cellDate .dateParts.literal {
  margin-left: 5px;
}

[luisestrada]

@MMRIZE said in MMM-CalendarExt3:

/* In your custom.css */
.CX3 .cellDate .dateParts.literal {
margin-left: 5px;
}

Thank you so much, muchas gracias :)