Did anyone every create the TickTick module?

Anyone got a current module for remember the milk? I found https://github.com/aranel616/rtm-js but it is archived and 9 years old. Is there a working one anywhere someone might know of?

@mr-fliffer
I never resolved the problem either. I went ahead and just used a single module for my purposes.

When I was running MMM–CalendarExt2 as shown in https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar?_=1604002766358.

As I recall the current week was always the first row in the calendar and it showed the next 6 weeks below that. I don’t recall for sure that it worked that way but seem to recall it working that way. As you can see in the screenshot Wed the 11th is highlighted and it is in the first row.

I believe one of these should probably work:

.CX2 .today .slotHeader {
background: rgba(64,64,64,0.8);
color: #000;
}

.CX2 .today .slotHeader .slotTitle {
color: #FFF;
}

.CX2 .today .slotContent {
background: #eeeeee69;
#border: 1px solid white;
}

@Clubjack
I am not quite sure what you mean by the Event-Bar. Is that the height of a row or title size or what exactly are you talking about? I no longer use the calendar as my needs were only for about 1 years time but might be able to help if you can tell me exactly what part you need to modify.

@Plainbroke-0

Take a look at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar/8 as it has the css and necessary config needed.

By logo do you mean the legend that is below the calendar event details on the right-hand side of the screen? If so then that is using the MMM-SimpleLogo module with the below config and an image that is 294x135 pixels.

{
  module: "MMM-SimpleLogo",
  disabled: false,
  position: "top_right",
  config: {
    position: "right",
    text: "",
    width: "250px"
  }

Note that the width: 250px is used so that it will be centered within the right-hand “column”.

Take a look at the thread at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar which was the same question but under a different heading and got more response. I ended up using MMM-CalendarExt2 and custom css. I don’t recall having a problem with the time info not displaying myself though.

@Clubjack
In my case it was mostly trial and error. I am not a css guru by any stretch of the imagination. You might want to take a look at https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works which has some tips.

@Clubjack
On the right-hand side I am using the modules all in the top-right region:
default clock
MMM-DarkSkyForecast
default calendar
MMM-SimpleLogo (used to display a static image that is my calendar color legend)

The main calendar is using MMM-CalendarExt2 in the top-left region with 7 different google/icloud calendar URLs defined in the “calendars” section of the module. The rest of the MMM-CalendarExt2 config in the config.js is for the view/scene and I am using this:

views: [
          { 
            name: "view1",
            mode: "week",
            slotCount: "7",
            maxItems: "1000",
            hideOverflow: false,
            slotMaxHeight: "95px",
            monthFormat: "MMMM YYYY",
            position: "top_left",
            calendars: []
          },
        ],
        scenes: [
          {  
            name: "DEFAULT",
          },
        ],

All of the formatting is done within the custom.css file which is heavily customized like this:

body {
        background-size: cover;
        margin: 20px; 
        height: calc(100% - 40px);
        width: calc(100% - 40px);
}

.xsmall {
        font-size: 17px;
}

.region.top.right {
        width: 23%;
}

.region.top.left {
        width: 77%;
}

.calendar .time {
        padding-left: 20px;
        color: #FFF;
        font-weight: normal;
}

.MMM-DarkSkyForecast .module-content {
        width: unset;
}

.CX2 {
        --font-size: 14px;
}

.CX2 .event {
        padding: 0px;
}

.CX2 .weekSlot .timelineSleeve {
        height: calc(var(--font-size) + 5px);
}

.CX2 .weeksmark {
        display:none;
}

.CX2 .event.passed::before {
        background: none;
}

.CX2 .cellSlot.weekday_6 .slotSubTitle {
        color: #F66;
}

.CX2 .cellSlot.weekday_7 .slotSubTitle {
        color: #F66;
}

.CX2 .cellSlot .slotTitle, .CX2 .cellSlot .slotSubTitle, .CX2 .cellSlot .slotAltTitle {
        font-size: 20px;
        color: #FFF;
}

.CX2 .today .slotHeader {
        background: rgba(64,64,64,0.8);
        color: #000;
}

.CX2 .today .slotHeader .slotTitle {
        color: #FFF;
}

.CX2 .today .slotContent {
        background: #eeeeee69;
        #border: 1px solid white;
}

.CX2 .me, .me.event.fullday {
        border-radius: 5px;
        background-color: #83CCD5;
        color: #000;
}

.CX2 .wife, .wife.event.fullday {
        border-radius: 5px;
        background-color: #EB738B;
        color: #000;
}

.CX2 .social, .social.event.fullday {
        border-radius: 5px;
        background-color: #D59C73;
        color: #000;
}

.CX2 .piano, .piano.event.fullday {
        border-radius: 5px;
        background-color: #B4CC5A;
        color: #000;
}

.CX2 .birthday, .birthday.event.fullday {
        border-radius: 5px;
        background-color: #F0E68C;
        color: #000;
}

.CX2 .college, .college.event.fullday {
        border-radius: 5px;
        background-color: #A473AC;
        color: #000;
}

.CX2 .holiday, .holiday.event.fullday {
        border-radius: 5px;
        background-color: #7B9CCC;
        color: #000;

.CX2 .slot > .slotContent {
        background-image: none;
}

.CX2 .monthViewTitle {
        text-align: left;
}

.CX2 .eventTitle {
        font-weight: normal;
}

@Clubjack
Here is what I am currently using.

Do you have ANY settings in the custom.css file that are working? In my case I had to explicitly add the line

customCss: “css/custom.css”,

to the config.sh file. Once I did that then items in the file started to take affect. I have not tried absolute values for the width but I have used the following successfully.

.region.top.right {
width: 23%;
}

.region.top.left {
width: 78%;
}

@Plainbroke-0
Not exactly like it. I made one that looks like this post and I am pretty happy with it.

https://forum.magicmirror.builders/topic/9601/some-magicmirror-modules-are-really-confusing/6#

Actually I have changed my setup from the above screenshot. I switched from the “month” view to a “week” view so that I can show the next 7 weeks on my screen. The current week is always the top row and then 6 following weeks afterwards.

Actually I posted this question to the MMM-CalendarExt2 github issues page and a new version was added today to address the problem. He added the ability to display the month and year.

I had this same question and the developer told me that you can add static text via the “title” parameter to the month view but nothing dynamic.

I was able to find a workaround though. In my case all I cared about was the month/year to be displayed above the calendar. Therefore I used the MMM-DateOnly module. In your case I suspect you will have to change the fullscreen_above to something like top_left and then set a width on the MMM-CalendarExt2 itself to make it take up the full screen. Then you can add the default clock (with showDate=false) on the top_left too and add the MMM-DateOnly to the top_right. Might be close to what you want.

I have had this problem too using the calendar module and it seems to be related to node-ical addition that parses the ical files. See link text to that post which has my solution at the bottom.

Re: MMM-CalendarExt2

Is there a way to format the calendar so it looks like the attached image. This is from a dakboard example but is clean and simple. I’ve tried some configuration of the MMM-calendarext2 but not getting anywhere close. Basically looking to get plain white text, equal sized “day” boxes, and a color chip/button to designate what calendar an event is from.

Some pointers would be great.

Are there any calendar modules out there (other than MMM-calendarext and MMM-calendarext2) which display the full month calendar with events from multiple calendars on it? I’ve tried the above 2 listed modules and they seem overly complicated and not exactly what I am looking for. For example, if I were to use dakboard their calendar looks like the one shown below. Is there anything like this for MM or does anyone have a set of configs to make the above modules look like this?

I’ve solved this problem by replacing the node-ical script that the default calendar modules uses with a fork of it.

I did some research and found that the default calendar module uses the node-ical modules to parse calendar data. I notice that it is based off of https://github.com/peterbraden/ical.js. I also found https://github.com/jens-maus/node-ical that is based off of the original peterbraden/ical.js. but seems to have been updated to use the npm package moment-timezone.

I did a drop in replacement and it seems to work:

cd modules/default/calendar/vendor
mv ical.js ical.js.orig
git clone https://github.com/jens-maus/node-ical
mv node-ical/ ical.js
cd ical.js
npm install

Restarted MM and now my timezones are showing up properly. So I made my own modules out of this so it won’t get overwritten by updates.