CGCalendar - Event background color

[georgechr]

Hey eveyrone,

Been trying for a few days now, to manage to change the background color of the event day and it doesnt seems to work or find it.

See the image below



I want the boxes that have an event to have another background color. I also noticed that the calendar-day tag in the stylesheet does not change anything.

If anyone could help it would be great.

I am attaching my stylesheet as well. Thanks in advance.

/*
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: #f79838;
}
.calendar a:hover {
color: #000000;
}
/* 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{
width: 100%;
height: 100%;
margin: 2px;
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
}
/* nice squares for the #cal-calendar table */
#cal-calendar th
{
border: 1px solid black;
padding: 5px;
width: 100px;
}
#cal-calendar td {
border: 1px solid black;
vertical-align: top;
padding: 5px;
height: 100px;
width: 100px;
}

/* 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: #ebe9e9;
}
#cal-calendar .calendar-day
{
background-color: #ffffff;
}
#cal-calendar .calendar-today
{
background-color: #d7e027;
}
.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
display: none;
}
#cal-calendar .calendar-month {
font-size: 16px;
font-weight: bold;
color: #7fba51;
text-decoration: none;
}
#cal-calendar .calendar-next a:link {
font-size: 16px;
color: #000000;
text-decoration: none;
}
#cal-calendar .calendar-next a:hover {
font-size: 16px;
color: #ff0000;
text-decoration: none;
}
#cal-calendar .calendar-next a:visited {
font-size: 16px;
color: #000000;
text-decoration: none;
}
#cal-calendar .calendar-next a:active {
font-size: 16px;
color: #ff0000;
text-decoration: none;
}
#cal-calendar .calendar-prev a:link {
font-size: 16px;
color: #000000;
text-decoration: none;
}
#cal-calendar .calendar-prev a:hover {
font-size: 16px;
color: #ff0000;
text-decoration: none;
}

[andre_designer]

hi george

i'v did this by this the last project that i have done. i add a extra div with a class by the tablecell when the event happening in the kalendar-template The template looking like this

Code: Select all

{strip}
<table class="calendar" id="cal-calendar">
<caption class="calendar-month"><span class="calendar-prev"><a href="{$navigation.prev}">«</a></span><span> {$month_names[$month]} {$year} </span><span class="calendar-next"><a href="{$navigation.next}">»</a></span></caption>
<tbody><tr>
{foreach from=$day_names item=day key=key}
<th 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}"> </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}"{/if}>
{if isset($day.events.0)}<div class="event"><a class="eventDate" href="{$day.url}">{$key}</a>
<ul>
{foreach from=$day.events item=event}
<li><a href="{$event.url}">{$event.event_title}</a></li>
{/foreach}
</ul>
</div>
{else}<span>{$key}</span>{/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}"> </td>
{/if}


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

{/strip}

and my stylesheet looking like this (change this to your flavor (i copy and paste it. it have some extra styles.so you must strip some styles))

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
{
    display: block;
 /* padding: 100%;*/

}

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

.calendar-month {
 margin: 5px;
}

.calendar-month .calendar-prev a, .calendar-month .calendar-next a ,
.calendar-list .calendar-prev a, .calendar-list .calendar-next a  {
   display: inline;
     width: 25px;
   height: 25px;
  /* background: #3EA5CE;*/
   color: #FFF;
   font-family: Economica;
   font-size: 18px;
   font-weight: 500;
   text-decoration: none;
  /* line-height: 2.2em;*/
    padding: 0px 18px;
    margin: 0 5px;
        -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
  /* border: none;*/
   text-shadow: #000 1px 1px 1px;
      background: #358DF0;
    -moz-box-shadow:    inset -2px -2px 4px #0070f0;
   -webkit-box-shadow: inset -2px -2px 4px #0070f0;
   box-shadow:         inset -2px -2px 4px #0070f0;
}

.calendar-month .calendar-prev a:hover,.calendar-month .calendar-next a:hover,
.calendar-list .calendar-prev a:hover, .calendar-list .calendar-next a:hover  {
   border: 1px;
   background: #358DF0;
   -moz-box-shadow:    inset 2px 2px 4px #0070f0;
   -webkit-box-shadow: inset 2px 2px 4px #0070f0;
   box-shadow:         inset 2px 2px 4px #0070f0;
     
}

/* 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 #CCC;
  width: 100%;
}

/* nice squares for the #cal-calendar table */
#cal-calendar th
{
   background: #358DF0;
   color: #FFF;
  border: 1px solid #CCC;
  padding: 3px;
  width: 75px;
}

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

#cal-calendar td span   {
   padding: 3px;
}


#cal-calendar td div.event   {
     height: 75px;
     width: 100%;
     background: #C4EEFF;
}

#cal-calendar td div.event ul li   {
   list-style: none;
}

#cal-calendar td div.event a.eventDate   {
   padding: 2px;
}

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

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

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

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

#cal-calendar .calendar-today 
{
  font-weight: normal;
  background-color: #358DF0;
  color: #FFF;
}

#cal-calendar .calendar-today div.event    
{
  font-weight: normal;
  background-color: #358DF0;
  color: #FFF;
}

#cal-calendar .calendar-today a {
   color: #FFF;
}

.calendar-date-from   {
   font-weight: bold;
   font-size: 12px;
   margin-bottom: 5px;
}

.calendar-event .calendar-date-from   {
   font-size: 12px;
   margin: 5px;
}

.calendar-event   {
   border: 1px solid #BBB;
   -moz-border-radius: 3px;/*Firefox*/
   -webkit-border-radius: 3px;/*Safari, Chrome*/
   -khtml-border-radius: 3px;/*Konqueror*/
   border-radius: 3px;
   padding: 5px;
   margin-bottom: 16px;
}

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

.event-calendar-navigation   {
   margin-bottom: 15px;
}

i hope that have something about it

[georgechr]

awesome man.

thank you for the great help.

Really appreciated.