We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36549
    • 572 Posts
    I've been using the mxCalendar for the first time today and created a mini calendar for use in sidebars etc where just the event date is 'clickable' rather than the title. So thought i'd post the css and chunks for anyone that may like to use it as a starting point.
    I've attached a screen shot below
    Here's what to do...

    1. Firstly duplicate the 'default' directory in assets/components/mxcalendars/themes and rename it 'mini'
    2. Then replace the styles in the /themes/mxcalendar.css with the following css (not too many changes here actually but good practice to make a duplicate):
    /* mxCalendar Styles */
    
    /*
    Colors:
    lightgrey = #F1F1F1
    grey = #E3E3E3
    dark = #555555
    */
    
    /* CALENDAR LAYOUT: Clean theme */
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    #calbody, #calbodylist, #mxccategories {
        background-color: transparent;
        color: #555555;
        width: 100%;
        display:block;
    }
    #calbody {position: relative;}
    #calbody H6, #calbodylist H6 { margin:0; padding:0; font-size:110%; }
    #calbodylist { width: 100%; margin:0; padding:0;  }
    #calbody .mxcCalMonth { line-height:18px;font-size:16px; margin:10px 0; }
    
    #calbody table {
        width:80%;
        margin: 0 auto;
    }
    
    #calbody td {
        padding: 0px;
        border: 1px solid #F1F1F1;
        text-align: center;
        width:13%;
        white-space: normal;
        height: 2em;
    }
    #calbody td .datestamp {
        font-weight:400;
        border: none;
        padding: 0;
        color:#222222;
    }
    
    .mxCalTitle-mini{background-color: #006eb9; color: #fff;height: 40px; text-align: center;}/*--- Added new title to [[tplMonth-mini]] chunk*/
    .mxCalTitle-mini h2 {font-size: 1.2em;margin: 0; padding: 0;line-height: 40px;}
    .mxCalTitle-mini h2 span.label {font-size: 0.9em;}
    #calbody td.mxcdow { color:#001d4e; border:none;background: #ECEBE9;}
    #calbody td.hasEvents {background-color: #006eb9;}
    #calbody td.hasEvents .event a {color: #fff;text-decoration: none;}
    #calbody td.hasEvents .event a:hover {color:#001d4e;}
    #calbody td.hasEvents .datestamp {display: none;}
    #calbody td.ncm .datestamp { color:#aaaaaa;}
    #calbody td.today { background-color:#EAEAEA; }
    #calbody td.today .datestamp { font-weight:400; }
    #calbody td .event {}
    #calbody td .event > div {}
    #calbody td .event .title { font-weight:normal;  }
    #calbody td .event .title a:hover { background-color:#efefef; }
    #calbody td .event .description { display:block; font-weight:normal; margin:0 0 8px 0; }
    #calbody td .event .durantion { font-size:.85em;}
    #calbody .event .dayofmonth { font-size:140%; }
    #calbody .mxcnav {width: 10px; height: 10px;font-size: 9px; font-weight: bold; line-height: 9px; padding: 2px;text-decoration: none;text-align: center;}
    #calbody .mxcnav.sm { font-size:12px; padding:0 7px 0 7px; } 
    #calbody .mxcnav:hover { background-color:#E3E3E3; color:#555555; } 
    a#mxcnextlnk {position: absolute; top: 50px; right: 5px;background: #006eb9; color: #fff;border: none; }
    a#mxcprevlnk {position: absolute; top: 50px; left: 5px;background: #006eb9; color: #fff;}
    a#mxcnextlnk:hover, #mxcprevlnk:hover {background: #001d4e;}
    #calbody td div span { clear:both; display:block; }
    #calbody .nomargins .mxcnav { margin:0 1px; }
    #calbodylist .monthheading { font-size: 160%; line-height:200%; background-color: #efefef; margin:15px 0 0; padding:0 5px;}
    #calbodylist .monthheading.first { margin-top:5px; } 
    #calbodylist .event { padding: 5px; }
    #calbodylist .event H4 { margin:0; padding:0; line-height: 21px; }
    #calbody a, #calbodylist a {}
    li.mxcactivecat a { font-weight:bold; text-decoration: none; list-style-image: none; }

    Duplicating chunks is the safest method....
    3. Duplicate the mxCalendar chunk 'tplEvent' and rename it 'tplEvent-mini' and paste the following:
    <div id="[[+id]][[+rid]]" class="[[+eventClass]]" >
    <a href="[[+detailURL]]" class="[[+mxcmodalClass]]" title="SEE EVENT LISTING"><span class="title [[+eventCategoryInlineCss]]">[[+dayOfMonth]]</span></a>
    </div>

    4. Duplicate the mxCalendar chunk 'tplMonth' and rename it 'tplMonth-mini' and paste the following:
    <div id="calbody" style="">
      <div class="mxCalTitle-mini">
        <h2>CAL TITLE<span class="label"> - [[+headingLabel:date=`%B %Y`]]</span></h2>
      </div>
      <div class="mxCalControls-mini">
           <a href="[[+prevLink]]" class="mxcnav" id="mxcprevlnk"><</a>
           <a href="[[+nextLink]]" class="mxcnav" id="mxcnextlnk">></a>
      </div>
    
        <table id="[[+containerID]]" class="[[+containerClass]]">
        [[+weeks]]    
        </table>
        [[+categories]]
    </div>

    5. Finally add your snippet call where you want the calendar to display (i have added a surrounding div with a fixed width of 300px for demo purposes but the calendar will fit within the constraints of an existing container as it has a % based width):
    <div style="width:300px;">[[!mxcalendar? &theme=`mini` &tplEvent=`tplEvent-mini` &tplMonth=`tplMonth-mini` &showCategories=`0`]]</div>

    [ed. note: 9thwave last edited this post 12 years, 2 months ago.]
      www.9thwave.co.uk
         WEB | DESIGN | PRINT
    • very nice, thanks for sharing
        Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
        Visit CharlesMx.com for latest news and status updates.
      • Got this working, thank you.

        But... the css isn't taking. The calendar continues to use the themes/default/mxcalendar.css instead of the themes/mini/mxcalendar.css.

        The primary problem is the minimum height on the #calbody td.event class. If I alter the default/mxcalendar.css then the regular calendar is also affected.

        Is there some way to tell the mini theme to use it's own css?

        Additionally, the day names had to be modified in the lexicon, but again this affects the normal calendar. Which is fine, but not ideal.


          Frogabog- MODX Websites in Portland Oregon
          "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
          Having server issues? These guys have MODX Hosting perfected - SkyToaster
        • Your first issue with the event td.event class I normally wrap the mini calendar items in another container in the template so that I can specifically target them or add an additional class name to the wrapping div.

          Example:
          #minical #calbody td.event { }


          More to come on the theme, to be honest I can't even remember
            Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
            Visit CharlesMx.com for latest news and status updates.