CGCalendar

[johnflan]

In the full view and list calendar I would like to have the expired events grey out just so that it's more obvious they are a past event.

Here's some links so you can see why I would like someone to help me with the coding.
https://clitheroeurc.org.uk/calendar-2/ ... endar.html
https://clitheroeurc.org.uk/calendar-2/calendar.html

[DIGI3]

Essentially it would be something like this in your template:

Code: Select all

<div class="calendar-event{if $event.event_date_start < $smarty.now} expired-event{/if}">

then adding the .expired-event class to your stylesheet and styling accordingly. It may be more complex depending on your setup and requirements, if you need to hire someone to help feel free to DM me here or hit me up on the CMSMS Slack. You might also want to consider migrating to Khronos, as CGCalendar was abandoned by its author.

[johnflan]

Thank you - I'll give it a try. Khronos - I need to tale a look at that!

[DIGI3]

Note that I may have the wrong variable names as I was looking at a Khronos template - I don't have a CGCalendar install handy to check, but it should be close enough to point you in the right direction.

[johnflan]

<div class="calendar-event {if $event.event_date_start < $smarty.now } expired-event {/if}">

I was beginning to wonder if it was me and my lack of knowledge! I don't think the $smarty.now works as it doesn't seem to identify the now date.

If I reverse the greater than then the css does kick in so the css works!

Ok am now trying Khronos, very similar interface and imports from GCGCalendar! Can use .ics too. Have to change the "a"s and "p"s to am and pm but I have the code to do that

Would still like to sort out that code though as I have it on another site. So please let me know the cost. Do you need the template or do you need to have access?

Here's the code just-in-case

Code: Select all

{* CGCalendar list view template *}

{* this template uses jquery and ajax for navigation *}
{if !isset($actionparams.cal_origparams)}
<__script__ type="text/javascript">
$(document).ready(function(){
  $(document).on('click','a.calendar-nav, a.calendar-cur',function(ev){
     // this loads the events via ajax.
     ev.preventDefault();
     var url = $(this).attr('href')+'&showtemplate=false';
     url = url.replace(/amp;/g,'');
     $(this).closest('.calendar-list').load(url);
     return false;
  });
});
</__script>
{/if}

<div class="calendar-list">
  {* a header *}
  <div class="calendar-list-hdr">
    {if $listtype == 'day'}
       <h3>{$mod->Lang('hdr_daylist')}: {$start_ts|date_format:'%d %b %Y'}</h3>
    {elseif $listtype == 'week'}
       <h3>{$start_ts|date_format:'%d %b %Y'} {$lang.to} {$end_ts|date_format:'%d %b %Y'}</h3>
    {elseif $listtype == 'month'}
       <h3>{*  {$mod->Lang('hdr_monthlist')} *}Events {$start_ts|date_format:'%B %Y'}</h3>
    {elseif $listtype == 'year'}
       <h3>{$mod->Lang('hdr_yearlist')} {$year}</h3>
    {elseif $listtype == 'upcominglist'}
       {* <h3>{$mod->Lang('hdr_upcominglist')}</h3> *}
    {elseif $listtype == 'pastlist'}
       <h3>{$mod->Lang('hdr_pastlist')}</h3>
    {/if}
  </div>

  {* a navigation, some views do not have navigation *}
  {if $nav}
  <div class="calendar-list-nav">
    {if isset($nav.prev_url)}
       <span class="calendar-prev"><a class="calendar-nav" href="{$nav.prev_url}"><i class="fa fa-chevron-left"></i> Prev</a></span>
    {/if}
    {if isset($nav.home_url)}
       <span class="calendar-cur"><a class="calendar-cur" href="{$nav.home_url}">{$lang.today}</a></span>
    {/if}
    {if isset($nav.prev_url)}
       <span class="calendar-next"><a class="calendar-nav" href="{$nav.next_url}">Next <i class="fa fa-chevron-right"></i></a></span>
    {/if}
  </div>
  {/if}

  {* the events themselves *}
  {foreach from=$events key=key item=event}
    <div class="calendar-event">

      {if $event.fgcolor != '' && $event.bgcolor != ''}

        <h4 style="color: {$event.fgcolor}; background-color: {$event.bgcolor};" ><a href="{$event.url}">{$event.event_title}</a></h4>
      {else}
        <h4><a href="{$event.url}">{$event.event_title}</a></h4>
      {/if}

      {if $event.event_date_start == $event.event_date_end || $event.event_date_end == 0}
        {* event has no end date *}
        <div class="calendar-date-from">{$event.event_date_start|date_format: "%A %e %B" }, From: {$event.event_date_start|date_format:"%l:%M%P" }</div>
      {else}
        {if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	   {* event starts and ends on the same day *}
           <div class="calendar-date-from"><span class="calendar-date-title"></span>{$event.event_date_start|date_format:"%A %e %B, %l:%M%P"} {$lang.to} {$event.event_date_end|date_format:"%l:%M%P"}</div>
        {else}
	   {* event staarts and ends on different dates *}
           <div class="calendar-date-from"><span class="calendar-date-title"></span>{$event.event_date_start|date_format:"%A %e %B, %l:%M%P"} {$lang.to} {$event.event_date_end|date_format:"%A %e %B, %l:%M%P"}</div>
        {/if}
      {/if}

      {$details=$event.event_details|strip_tags|trim}

{* optionally display detail information
      {if $event.event_summary != '' && $details != ''}
        <div class="calendar-summary"><span class="calendar-summary-title"></span>{$event.event_summary}</div>
      {/if}
      
      {if $details != ''}
        <div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
      {/if}
      *}

<div class="calendar-summary">{$event.event_summary}</div>
{if $details != ''}
      <a href="{$event.url}"><em>More... </em><i class="fa fa-chevron-right"></i></a>
        {else}
      {/if}
<br /><br />
    </div>
  {/foreach}
</div>