• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Monthly Calendar View

Scheduled Pinned Locked Moved Solved Requests
58 Posts 23 Posters 76.0k Views 19 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.
  • K Offline
    KirAsh4 Moderator
    last edited by KirAsh4 Jun 1, 2016, 5:06 AM Jun 1, 2016, 4:09 AM

    And after a quick rewrite to use Moment.js instead of cumbersome Javascript calculations, I also did a bit of styling. I opted not to go the CSS route because the reality is, this is table-worth data, not CSS. It solves a lot of headaches to be honest. I did incorporate proper language translations. It just reads your locale and uses that.

    • Still to-do is allowing for a Sun/Mon start of the week.

    0_1464754026074_cal2en.png

    0_1464757427005_cal2es.png

    A Life? Cool! Where can I download one of those from?

    1 Reply Last reply Reply Quote 0
    • T Offline
      trividar
      last edited by Jun 1, 2016, 8:10 AM

      @KirAsh4 …that looks amazing! exactly what i looking for…

      1 Reply Last reply Reply Quote 0
      • P Offline
        paviro Admin
        last edited by Jun 1, 2016, 8:21 AM

        I think I prefer the first styling 😅 but maybe that’s just me :)

        We're all stories in the end. Just make it a good one, eh?

        – The Doctor

        F 1 Reply Last reply Jun 1, 2016, 8:25 AM Reply Quote 1
        • F Offline
          flooo @paviro
          last edited by flooo Jun 1, 2016, 8:25 AM Jun 1, 2016, 8:25 AM

          @paviro said in Weekly Calendar:

          I think I prefer the first styling 😅 but maybe that’s just me :)

          It is not only you :) I also prefer the first style.
          Sometimes a little less is a little more ;-)

          1 Reply Last reply Reply Quote 1
          • K Offline
            KirAsh4 Moderator
            last edited by Jun 1, 2016, 2:22 PM

            CSS styling can be changed by anyone. At this point I’m just playing with it whenever I take a break from actually writing code. There are still bits of code that I don’t like. The trouble with being OCD.

            A Life? Cool! Where can I download one of those from?

            1 Reply Last reply Reply Quote 0
            • K Offline
              KirAsh4 Moderator
              last edited by KirAsh4 Jun 1, 2016, 6:52 PM Jun 1, 2016, 6:51 PM

              I reverted to much simpler times. One of the things that irked me is that I’m displaying a month/year on the calendar when it’s displayed right above it in the clock module. So, I made it optional. One can choose to turn off the header or leave it on. For those of you who don’t display the clock (or who put it elsewhere), it’s helpful to leave the header on, but if you have the clock enabled, there’s no sense in adding the month and year right below it again. This trims the header and keeps a clean interface.

              0_1464806325661_calheader.png

              And I left the ability for the end user to create a custom CSS file and modify the look (I turned the header back on for this preview):

              0_1464806602032_calcolor_003.png

              In the above example, the custom CSS added a bullet point in between the month and year (which does not exist in the default CSS), made the year digits brighter, and colorized the current day. There are several nested elements that will allow the user to customize how they want their calendar to look. I’m looking at you guys who also have a colorized version of the weather module. :)

              A Life? Cool! Where can I download one of those from?

              1 Reply Last reply Reply Quote 0
              • F Offline
                flooo
                last edited by Jun 1, 2016, 7:58 PM

                I really like that touch of green in there…
                Well done!

                1 Reply Last reply Reply Quote 0
                • K Offline
                  KirAsh4 Moderator
                  last edited by Jun 1, 2016, 8:04 PM

                  That’s the custom CSS being implemented. By default it doesn’t have any color nor border. The user can edit their CSS and personalize it that way. Essentially the code reads:

                  	// Module defaults
                  	defaults: {
                  		...
                  		displayMonthyear: true,
                  		cssStyle: "default" /* Current options are 'default', 'block', 'custom' */
                  	},
                  
                  	// Required styles
                  	getStyles: function() {
                  		switch(this.config.cssStyle) {
                  			case "block":
                  				return ["styleDefault.css", "styleBlock.css"];
                  				break;
                  			case "custom":
                  				return ["styleDefault.css", "styleCustom.css"];
                  				break;
                  			default:
                  				return ["styleDefault.css"];
                  		}
                  	},
                  

                  A Life? Cool! Where can I download one of those from?

                  1 Reply Last reply Reply Quote 2
                  • K Offline
                    KirAsh4 Moderator
                    last edited by Jun 2, 2016, 6:18 PM

                    So as it turns out, it’s extremely easy to let the calendar Do Its Own Thing as far as figuring out what day to start the week on, Sunday or Monday. It litereally done by the system’s LOCALE, which you control by setting a language option in the main 'config.js'. Below is a screen shot of the English ('en') versus Spanish ('es') setting:

                    0_1464890163157_caldates.png

                    Notice how the Spanish one starts on Monday (lunes) whereas the English one starts on Sunday. I am not manually calculating this to draw the calendar. Moment.js takes care of this automatically.

                    Here’s the drawback: if your LOCALE defines the start of the week as Sunday, but you want to VISUALLY set the calendar to Monday (or vice verse), that would require me to actually manually calculate the entire calendar and draw it out. It’s a pain in the rear to be honest.

                    A Life? Cool! Where can I download one of those from?

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      MichMich Admin
                      last edited by Jun 4, 2016, 6:36 PM

                      A bit late to the party thanks to a delightful holiday, but I must say: nice work on the calendar.
                      One small suggestion: change the green color to an inverted black and white digit. I prefer the MM to be fully B&W.

                      K 1 Reply Last reply Jun 4, 2016, 7:29 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 2 / 6
                      2 / 6
                      • First post
                        16/58
                        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