CMS Made Simple Forums

Code: Select all

/*
Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar'}

*/



/* make all links red */
.calendar tr td a
{
  color: red;
}

/* highlight "today" for the small calendar */
.calendar-today
{
  font-weight: bold;
}

/* display the "upcominglist" as one line per entry (assuming default class and id names) */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
  display: none;
}

#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
  display: inline;
  margin-right: 5px;
}

/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
  color: red;
  font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
  font-size: 110%;
}

/** large calendar rules (assuming default class and id names) **/
/* border on for #cal-calendar */
#cal-calendar{
  margin: 0px;
  border-collapse:    collapse;
  border: 1px solid black;
}

/* nice squares for the #cal-calendar table */
#cal-calendar th
{
  border: 1px solid black;
  padding: 3px;
  width: 75px;
}

#cal-calendar td {
  border: 1px solid black;
  vertical-align: top;
  padding: 3px;
  height: 75px;
  width: 75px;
}

/* format summaries nicely in #cal-calendar */
#cal-calendar ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
}

#cal-calendar li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* background colours for #cal-calendar */
#cal-calendar td
{
  background-color: silver;
}

#cal-calendar .calendar-day
{
  background-color: #80ff80;
}

#cal-calendar .calendar-today
{
  font-weight: normal;
  background-color: #8080ff;
}

.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
  display: none;
}

Code: Select all

{if !isset($smarty.get.nojs)}
<__script__ type="text/javascript">{jsmin}
// the jsmin plugin is included with CGExtensions.
if( typeof jQuery != 'undefined' ) {
  $(document).ready(function(){
    $(document).on('click','a.calendar-nav',function(ev){
      // allow paginating through months via ajax.
      var url = $(this).attr('href').replace(/amp;/g,'')+'nojs=1&showtemplate=false';
      $('#cal-calendar').load(url);
      ev.preventDefault();
    });

    if( jQuery().dialog ) {
      $(document).on('click','a.calendar-daylist',function(ev){
        // demonstrate viewing a day list in a popup dialog
        // and mixing smarty and javascript code.
        // uses jquery ui dialog... but could just as easily use fancybox etc.
        // you could add parameters here for changing the template from the default, etc, or even filter by category.
        ev.preventDefault();
        var day = new Date( $(this).data('day') * 1000 );
        var m = day.getMonth()+1;
        var d = day.getDate();
        var y = day.getFullYear();
        var url = '{module_action_link module=CGCalendar display=list day=DDDD  month=MMMM year=YYYY jsfriendly=1}&showtemplate=false';
        url = url.replace('MMMM',m).replace('DDDD',d).replace('YYYY',y);
        $('#cal-dayview').load(url,function(data){
          $('#cal-dayview').dialog({
            title: '{$mod->Lang('dayview')}'
          })
        });
      });
    }
  })
} // jquery test
{/jsmin}</__script>
{/if}

{strip}
<div style="display: none;">{* a simple wrapper *}
  <div id="cal-dayview"></div>
</div>
<table class="calendar" id="cal-calendar">
<caption class="calendar-month">
   <span class="calendar-prev"><a class="calendar-nav" href="{$navigation.prev}">&laquo;</a></span>
     {$date|date_format:'%b %Y'}
   <span class="calendar-next"><a class="calendar-nav" href="{$navigation.next}">&raquo;</a></span>
</caption>
<tbody><tr>
{foreach from=$day_names item=day key=key}
<th class="cal-dayhdr" abbr="{$day}">{$day_short_names[$key]}</th>
{/foreach}</tr>

<tr>
{* initial empty days *}
{if $first_of_month_weekday_number > 0}
<td colspan="{$first_of_month_weekday_number}">&nbsp;</td>
{/if}

{* iterate over the days of this month *}
{assign var=weekday value=$first_of_month_weekday_number}
{foreach from=$days item=day key=key}
{if $weekday == 7}
  {assign var=weekday value=0}
</tr>
<tr>
{/if}
<td {if isset($day.class)}class="{$day.class} cal-day"{/if}>
{if isset($day.events.0)}<a class="calendar-daylist" data-day="{$day.date}" href="{$day.ni_url}">{$key}</a>{* by default use the non inline (replace content tag) version of the URL *}
<ul>
{foreach from=$day.events item=event}
<li>
  {* some simple smarty logic to use the foreground and background colors assigned to an event *}
  {$style=''}{if $event.bgcolor}{$style="style=\"color: {$event.fgcolor}; background-color: {$event.bgcolor}\""}{/if}
  <a class="calendar-event" href="{$event.url}" {$style}>{$event.event_title|summarize:20}</a></li>
{/foreach}
</ul>
{else}{$key}{/if}
</td>
{math assign=weekday equation="x + 1" x=$weekday}
{/foreach}

{* remaining empty days *}
{if $weekday != 7}
<td colspan="{math equation="7-x" x=$weekday}">&nbsp;</td>
{/if}


</tr>
</tbody></table>

{/strip}

Code: Select all

<td {if isset($day.class)}class="{$day.class} cal-day"{/if}>

Code: Select all

<td {if isset($day.events.0)}class="cal-day events"{elseif isset($day.class)}class="{$day.class} cal-day"{/if}>

Code: Select all

#cal-calendar .events
{
background-color: red;
}