CMS Made Simple Forums

HI All,

I'm using CMS MS 1.2.3 with Calendar 0.7.13

I'm wracking my brains trying to figure this out:

I'm using the big calendar on a page by itself. I'd like to highlight the squares (or cells) on the calendar that have an event... basically, if there is an event on Feb 23rd, I want the color of the square to be different.

Thanks for any help!

Below is my Calendar CSS if that helps:

/*
Example stylesheet for Calendar module

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

{cms_module module='Calendar' table_id='big'}

*/



/* make all links red */
.calendar tr td a
{
  color: white;
  background-color: red;
  font-size: 1.3em;
  font-weight: bold;
}
.calendar tr td a:hover
{
  color: red;
  background-color: white;
  font-size: 1.3em;
  font-weight: bold;
}

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

/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#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: 130%;
}
#cal-list h2, cal-upcominglist h2
{
  font-size: 120%;
}

/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big{
  margin: 0px;
  border-collapse:    collapse;
  border: 1px solid black;
}

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

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

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

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

/* background colours for #big */
#big td
{
  background-color: #cccccc;
}

#big .calendar-day
{
  background-color: #ffffff;
}

#big .calendar-today
{
  font-weight: normal;
  background-color: #6699cc;
}


.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
  font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  display: none;
}

Depending on your calendar template, you could try...

#big .event {
  background-color: #FFB6C1;
}

or

#big .calendar-events {
  background-color: #FFB6C1;
}

Nullig

Thanks for your quick reply!

Unfortunately, that didn't do the trick... Actually, it changed the background for the Details of the event, which is cool, but I need the actual cell in the Big Calendar Grid to change color if there is an event.

Below is the Calendar Template if that helps.

Thanks again for your help.

{strip}

{if $compact_view neq 1}
« {$month_names[$month]} {$year} »
{/if}

{foreach from=$day_names item=day key=key}
{$day_short_names[$key]}
{/foreach}


{* initial empty days *}
{if $first_of_month_weekday_number > 0}
 
{/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}


{/if}

{if isset($day.events.0)}{$key}
{if $summaries == false}

{foreach from=$day.events item=event}
{$event.event_title}
{/foreach}

{/if}
{else}{$key}{/if}

{math assign=weekday equation="x + 1" x=$weekday}
{/foreach}

{* remaining empty days *}
{if $weekday != 7}
 
{/if}





{/strip}

In your template replace this line:
with:
Then, in your stylesheet add:
Nullig

SWEET!!! Thanks so much... that did it!

If you want to style different colors for different events, you can change that section to look at the event titles and add different classes.

Say you had a reservation system with "Tentative", "Confirmed" and "Cancelled" event titles, you could use:
and have different styles for each class.

Nullig

Great... that might come in handy... thanks again.

I have a couple more questions for Calendar, but I'll post a new topic