CGCalender color event

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

CGCalender color event

Post by sjoerdd87 »

Hello all,

Can someone help me with CGCalender.

I want to change the color of the day with an event.

Thanks for helping me.

This is the standard CSS i use:

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;
}
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event

Post by sjoerdd87 »

Now i have only the color of the background of the text, but i want the hole day in a different color.

Like the day from now it is als a different color, they used background-color but i cant find where to set it only for events.
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event

Post by sjoerdd87 »

No one who can help me? or have the same problem?

Also a good template voor CGCalendar is good then i gen get the code out of it.

Or has no one use CGCalender?
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: CGCalender color event

Post by calguy1000 »

sjoerdd87 wrote:No one who can help me? or have the same problem?

Also a good template voor CGCalendar is good then i gen get the code out of it.

Or has no one use CGCalender?
Well. if read and follow all of the forum rules and provided context, information and a detailed explanation of the problem then you make it possible for people to assist you. If you don't... you are not likely to get assistance.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event

Post by sjoerdd87 »

calguy1000 wrote:
sjoerdd87 wrote:No one who can help me? or have the same problem?

Also a good template voor CGCalendar is good then i gen get the code out of it.

Or has no one use CGCalender?
Well. if read and follow all of the forum rules and provided context, information and a detailed explanation of the problem then you make it possible for people to assist you. If you don't... you are not likely to get assistance.
O sorry, my versions:

CMSMS 1.11.9
CGCalendar 1.14.3
CGExtensions 1.45
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event

Post by sjoerdd87 »

No one can help?
chandra

Re: CGCalender color event

Post by chandra »

Please post Calendar template you are using ...
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event

Post by sjoerdd87 »

chandra wrote:Please post Calendar template you are using ...
Here is my template:

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

Re: CGCalender color event

Post by chandra »

Please try this - replace this line

Code: Select all

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

Code: Select all

<td {if isset($day.events.0)}class="cal-day events"{elseif isset($day.class)}class="{$day.class} cal-day"{/if}>
Define now background color for table cells with events with css class events.

(untested)
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: CGCalender color event [SOLVED]

Post by sjoerdd87 »

chandra wrote:Please try this - replace this line

Code: Select all

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

Code: Select all

<td {if isset($day.events.0)}class="cal-day events"{elseif isset($day.class)}class="{$day.class} cal-day"{/if}>
Define now background color for table cells with events with css class events.

(untested)
Try this:

Code: Select all

#cal-calendar .events
{
background-color: red;
}
And working! :-) thanks for help!
chandra

Re: CGCalender color event

Post by chandra »

You're welcome ...
Post Reply

Return to “Modules/Add-Ons”