Calendar - How do I color Event in Big Calendar [SOLVED]

[BobX]

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;
}

[Nullig]

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

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

or

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

Nullig

[BobX]

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}

[Nullig]

In your template replace this line:

Code: Select all

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

with:

Code: Select all

<td {if isset($day.class)}class="{$day.class}"{/if}
{if isset($day.events.0)} 
{foreach from=$day.events item=event}
class="event"
{/foreach}
{/if}>

Then, in your stylesheet add:

Code: Select all

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

Nullig

[BobX]

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

[Nullig]

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:

Code: Select all

<td {if isset($day.class)}class="{$day.class}"{/if} 
{if isset($day.events.0)} 
{foreach from=$day.events item=event}
  {if $event.event_title == 'Tentative'}
    class="tentative"
  {elseif $event.event_title == 'Confirmed'}
    class="confirmed"
  {else}
    class="cancelled"
  {/if}
{/foreach}
{/if}>

and have different styles for each class.

Nullig

[BobX]

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

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