MMM-CalendarExt

[cptkex]

@sean thanks for replying, and yes i should definitly learn more CSS if i want to use this. I just needed to know where to start, and i can work myself forward from there. I know the 1080 pixel space isnt optimal for a Weeks setup, but going through all the other alternatives, it provides just the right kind of data for my family´s day to day activities, so its more suitable. I am playing around with the font sizes, trying to find what fits within the design and how visible it is. I have tried other setups for greater visibility, but ended up with this being the best option together with the upcoming one that is more “at a glance”

thank you so much for your help, ill try to read up on some CSS so i dont bother you with every little detail. My biggest problem has been that i dont know where to start, and now i have enough data to start changing parameters to learn what i need to change to achieve the best possible outcome.

[A Former User]

@cptkex
I think https://www.w3schools.com/ is the best source for the beginners. I wish you have a good luck.

[Smotx]

Hi,

It’s possible to start ‘roll’ at the date of current day and no first day of month ?

Thx

[A Former User]

@smotx Sorry, it can’t without source modifying.

[jimmysmalls]

I can’t seem to figure out why I don’t have the start times on my calendar. I’m really liking it other than that. I’m sure it’s probably something simple but I’m open to feeling stupid after the time I’ve spend trying to figure it out haha

{
      module: 'MMM-CalendarExt',
      position: "lower_third", // ignore this.
      config: {
        system: {
          show: ['month'],
          locale: 'en',
	  showEmptyView: 1,
        },
        views: {
          month: {
            position:'lower_third',
	    showWeeks: 0,
	    onlyStartingTime:1,
          },
        },
        calendars :[
          {

[A Former User]

@jimmysmalls
By default, time of month/week view is hidden because there might be not enough space.
Add this into your css/custom.css;

.CALEXT .tableStyle .eventTime {
   display: block;
   order: 3; // when you want to display time under the event title. 
}

[jimmysmalls]

@sean
That did the trick, thank you! One other quick question that maybe I’m overlooking the answer to in the documentation but is there a way to have it show the time on a 12 hour format instead of 24?

[A Former User]

@jimmysmalls
use timeFormat: "hh:mm A" instead timeFormat: "HH:mm"
If you don’t want AM/PM indicator, just use "hh:mm"

[JKTitanium]

@vauxdvihl

Hi, Sorry I new here. Do I need a seperate Calender for each icon/emoj? Can I use Rules for one single Calendar?

[A Former User]

@jktitanium
Symbol is fixed per calendar.
However each event style(color or font except symbol) could be variable by condition.

[Frek]

Hi. In weeks view with event time displayed, is there a way to remove the starting time and ending time on full day events?

[A Former User]

@frek
Add this into your css/custom.css;

.CALEXT .tableStyle .eventTime {
display: none;
}

[Frek]

@sean
Thx for the reply.
I already have this in my css to display time, that I want:

div.CALEXT .tableStyle .eventTime {
display:block;
font-weight:normal;
font-size:70%;
}

But I was wondering if on full day events its possible to only show title, not the time

[A Former User]

@frek

div.CALEXT .tableStyle .fulldayevent .eventTime {
  display:none;
}

Try this.

[Frek]

@sean
tried adding i to my custom.css and no change. my .css looks like:

 /*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

 body {
  margin: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);	
 }
 div.CALEXT .tableStyle .fulldayevent .eventTime {
  display:none;
 }
 div.CALEXT .tableStyle .eventTime {
  display:block;
  font-weight:normal;
  font-size:70%;
 }
 .CALEXT .tableStyle td.slot {
  max-height:200px;
  height:200px;
 }
 .CALEXT .tableStyle {
  margin:0;
  max-width: 100%;
 }

[A Former User]

@frek said in MMM-CalendarExt:

div.CALEXT .tableStyle .fulldayevent .eventTime {
display:none;
}
div.CALEXT .tableStyle .eventTime {
display:block;
font-weight:normal;
font-size:70%;
}
.CALEXT .tableStyle td.slot {
max-height:200px;
height:200px;
}
.CALEXT .tableStyle {
margin:0;
max-width: 100%;
}

I tested with your CSS but it works as expectation.

[Frek]

@sean ah suck… my test calendar didnt have a full day event… just a long normal event. Google calandar tricked me by showing me it as a fullday event in their app…No wonder why it didnt work… thx for the help =)

[goalie2k]

Is it possible to make the event time display on the SAME line as the event title?

[A Former User]

@goalie2k
Of course possible by adjusting CSS
Add this into your css/custom.css

.CALEXT .event .eventContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


.CALEXT .eventTime {
  order: 2;
  width: 30%;
}

.CALEXT .eventContent {
  order: 1;
  width: 70%;
}

It will show like this.

[goalie2k]

@Sean said in MMM-CalendarExt:

order: 2;
width: 30%;

YOU ROCK! Thank you!