[SOLVED] Weekly Calendar with CG Calendar

[nils73]

Hi everybody,

I almost managed to get a weekly list of recurring events with CG Calendar. However I do not get results for two more days (Saturday / Sunday that is). I am using "list" view and use the following code:

Code: Select all

<div id="kurse">
  <ul id="kalender">
    {foreach from=$day_names item=day key=key}
    <li class="k-{$day_short_names[$key]|lower}">
      <h5><abbr title="{$day}">{$day_short_names[$key]}.</abbr></h5>
      <ol>
      {foreach from=$events key=key item=event}{assign var=timezone value='01:00'}
      {assign var=daag value=$event.event_date_start|date_format:"%A"}
      {if ($daag == $day) && ($event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y")}
      {assign var=nn value=10}
      {assign var=hetime value=$event.event_date_end|date_format:"%H"}
      {assign var=hstime value=$event.event_date_start|date_format:"%H"}
      {assign var=metime value=$event.event_date_end|date_format:"%M"}
      {assign var=mstime value=$event.event_date_start|date_format:"%M"}
        <li class="{if $event.fields.Special == ""}cat1{else}{$event.fields.Special}{/if}" style="height: {math equation="(((a-b)+((x/60)-(y/60)))*48)" a=$hetime b=$hstime x=$metime y=$mstime format="%d"}px; top: {math equation="(((b+(y/60))-a)*50)" a=$nn b=$hstime y=$mstime format="%d"}px"><a title="Details zum Kurs" href="{$event.url}"><strong><abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_start|date_format:"%H:%M"}</abbr><span class="hideme"> - <abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_end|date_format:"%H:%M"}</abbr></span></strong><br />{$event.event_title}</a></li>
      {/if}
      {/foreach}
      </ol>
    </li>
    {/foreach}
  </ul>
</div>

Any suggestions what to do? Maybe I need to modify function.displaylist.php as well. I'd really like to solve this problem since it has been asked several times here without any solution. CMSMS is such a great system but has no weekly calendar? Come on ... let's solve this one!

Regards
Nils

[blackhawk]

If using the default monthly calendar template, I think the key is to filter which <tr> you want to display. Looking into it...

[blackhawk]

I decided to do my own beta week calendar template, based off the code in the monthly-calendar view. Feel free to upgrade / modify it. It was a quick thing I needed to do for a client.

I couldn't rely only on the template code itself to get the current week days plus the weekends. So I created a custom UDT along with the template code. This is a vertical list of days for the current week...


The small UDT

Code: Select all

//$timestamp = time(); 
$oneday = 60*60*24; //86400
$WeekDayNumber = date('w');

//dates for the current week
$WeekBegin = date("Y-m-d",time() - ($WeekDayNumber)*$oneday);
$sdate =   date("Y-m-d", (strtotime("+6 day",strtotime($WeekBegin))));

/* extra just for show
$mdate =  date("Y-m-d", (strtotime("+1 day",strtotime($WeekBegin))));
$tdate =   date("Y-m-d", (strtotime("+2 day",strtotime($WeekBegin))));
$wdate =  date("Y-m-d", (strtotime("+3 day",strtotime($WeekBegin))));
$thdate = date("Y-m-d", (strtotime("+4 day",strtotime($WeekBegin))));
$fdate =   date("Y-m-d", (strtotime("+5 day",strtotime($WeekBegin))));
*/


$smarty->assign('msunday', $WeekBegin);
$smarty->assign('msaturday', $sdate);

/*extra just for show
$smarty->assign('mmonday', $mdate);
$smarty->assign('mtuesday', $tdate);
$smarty->assign('mwednesday', $wdate);
$smarty->assign('mthursday', $thdate);
$smarty->assign('mfriday', $fdate);
$smarty->assign('mtoday', $matched);
*/

The Calendar Template code

Code: Select all

{strip}
{*get_template_vars*}
{*load UDT to filter week days*}
{week}

<h2 class="nick-week-header">
{$msunday|date_format} - {$msaturday|date_format}
</h2>

{foreach from=$days item=day key=key}

{if 
  ($day.date|date_format:"%Y-%m-%d" >= $msunday) &&
  ($day.date|date_format:"%Y-%m-%d" <= $msaturday)
}
<div class="nick-week {if isset($day.class)} today{/if} ">

{*current day and if it had events*}
{if isset($day.class)}
<span>
<b>{$day.date|date_format:"%A, %B %e"}</b>
</span>

   {if isset($day.events.0)}
   <ol>
   {foreach from=$day.events item=event}
   <li><a href="{$event.url}" title="{$event.event_date_start|date_format:'%A, %B %e - %r'} - {$event.event_details}">{$event.event_summary}
   </a></li>
    {/foreach}
    </ol>
    <hr />
    {else}
     <ol><li>-</li></ol>
    <hr />
    {/if}

{else}
   
   {*every other day this week and if they have events*}
   <span>
   {$day.date|date_format:"%A, %B %e"}
   </span>

   {if isset($day.events.0)}
    <ol>
   {foreach from=$day.events item=event}
   <li><a href="{$event.url}" title="{$event.event_date_start|date_format:'%A, %B %e - %r'} - {$event.event_details}">{$event.event_summary}
   </a></li>
    {/foreach}
    </ol>
    <hr />
    {else}
    <ol><li>-</li></ol>
    <hr />
    {/if}

{/if}
</div>
{else}
{/if}
{/foreach}
{/strip}

The CSS

Code: Select all

/*template - weekly events*/
div.nick-week {
padding:0 0 0px 0;
margin:0 0 3px 0;
position:relative;
top:0;
left:0;
width:400px;
background:#C5D5E5;
border:solid 1px #000;
}

div.today {
background:#E9B4A1;
}

div.nick-week span {
padding:0;
margin:0;
position:absolute;
top:15px;
left:10px;
width:150px;
font:normal 12px verdana;
color:#000;
}

div.nick-week ol, div.nick-week ol.iefix  {
padding:8px;
margin: 0 0 -2px 0;
list-style:none;
float:right;
border-left:solid 5px #336699;
width:230px;
background:#F6CF73;
}

/*conditional comment for IE*/
div.nick-week ol.iefix {
margin:0 0 -32px 0;
padding:0 0 15px 0;
position:relative;
top:-18px;
}
/************************/


div.nick-week ol li {
padding:0;
margin:0;
line-height:30px;
}

div.nick-week ol li a {
text-decoration: none;
text-align: left;
font: bold 11px verdana, arial;
color: #193783;
}

div.nick-week hr {
margin:0;
padding:0;
height:0;
visibility:hidden;
clear:both;
}

I haven't fully tested it on IE yet, but if anyone is willing to clean this up further, please help.

Thanks!

[nils73]

I decided to do my own beta week calendar template, based off the code in the monthly-calendar view. Feel free to upgrade / modify it.

Thanks blackhawk - it worked for me. Right now I am using the following code for my upcoming weekly events, based on blackhawks UDT (called filter_weekdays in my case) and another UDT for Daylight Savings Time that I created ... but you could leave that one out:

Code: Select all

{filter_weekdays}
{capture assign=dstvar}{dst}{/capture}
<h4>Courses from {$mmonday|date_format:"%d.%m."} to {$msunday|date_format:"%d.%m.%Y"}</h4>
<div id="courses" class="events">
  <ul id="calendar">
  {assign var=timezone value=$dstvar}
  {foreach from=$days item=day key=key}
    {if ($day.date|date_format:"%Y-%m-%d" >= $mmonday) && ($day.date|date_format:"%Y-%m-%d" <= $msunday)}
    <li class="k-{$day.date|date_format:"%A"|truncate:"2":""|lower}">
    {*current day and if it had events*}
    {if isset($day.class)}
    <!-- use microformats for hCalendar from here -->
    <h5 class="cat2"><abbr title="{$day.date|date_format:"%A"}">{$day.date|date_format:"%A"|truncate:"3":"."}<span class="print">, {$day.date|date_format:"%d.%m.%Y"}</span></abbr></h5>
    {if isset($day.events.0)}
    <ol>
      {foreach from=$day.events item=event}
      {assign var=daag value=$event.event_date_start|date_format:"%A"}
      {if isset($day.class) && ($event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y")}
        {assign var=nn value=10}
        {assign var=hetime value=$event.event_date_end|date_format:"%H"}
        {assign var=hstime value=$event.event_date_start|date_format:"%H"}
        {assign var=metime value=$event.event_date_end|date_format:"%M"}
        {assign var=mstime value=$event.event_date_start|date_format:"%M"}
      <li class="cat2 vevent" style="height: {math equation="(((a-b)+((x/60)-(y/60)))*48)" a=$hetime b=$hstime x=$metime y=$mstime format="%d"}px; top: {math equation="(((b+(y/60))-a)*50)" a=$nn b=$hstime y=$mstime format="%d"}px"><a title="Details zum Kurs" href="{$event.url}"><strong><abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_start|date_format:"%H:%M"}</abbr><span class="print"> - <abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_end|date_format:"%H:%M"}</abbr></span></strong><br /><span class="summary">{$event.event_title}</span></a></li>
      {/if}
    {/foreach}
    </ol>
    {/if}
{else}
   {*every other day this week and if they have events*}
   <h5><abbr title="{$day.date|date_format:"%A"}">{$day.date|date_format:"%A"|truncate:"3":"."}<span class="print">, {$day.date|date_format:"%d.%m.%Y"}</span></abbr></h5>
   {if isset($day.events.0)}
   <ol>
     {foreach from=$day.events item=event}
      {assign var=daag value=$event.event_date_start|date_format:"%A"}
        {assign var=nn value=10}
        {assign var=hetime value=$event.event_date_end|date_format:"%H"}
        {assign var=hstime value=$event.event_date_start|date_format:"%H"}
        {assign var=metime value=$event.event_date_end|date_format:"%M"}
        {assign var=mstime value=$event.event_date_start|date_format:"%M"}
      <li class="cat1 vevent" style="height: {math equation="(((a-b)+((x/60)-(y/60)))*48)" a=$hetime b=$hstime x=$metime y=$mstime format="%d"}px; top: {math equation="(((b+(y/60))-a)*50)" a=$nn b=$hstime y=$mstime format="%d"}px"><a title="Details zum Kurs" href="{$event.url}"><strong><abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_start|date_format:"%H:%M"}</abbr><span class="print"> - <abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%dT%H:%M:%S+$timezone"}">{$event.event_date_end|date_format:"%H:%M"}</abbr></span></strong><br /><span class="summary">{$event.event_title}</span></a></li>
    {/foreach}
    </ol>
    {/if}
{/if}
</li>
{/if}
{/foreach}
</ul>
</div>

The above code is kind of a hack to create a nested list of events that can be styled in whatever way you want it. In my case I styled it as a table which is why I needed to tweak the code that much (i.e. applied inline-styles to adjust the height of the timetable-cells). Unfortunately the result isn't online yet but it looks like the attached version.

Regards
Nils

[lowestman]

Could you give me a little more instruction on how to use this?

[lowestman]

I am using this code and if only brings up 5 days of the week. How can I get all 7 days of the week?

[nils73]

Could you give me a little more instruction on how to use this?

Yes, no problem.

Step 1: Install CG Calendar, latest version.

Step 2: Follow the instructions by blackhawk and create a User defined tag (UDT) named filter_weekdays and paste the UDT-Code by blackhawk in there.

Step 3: In CG Calendar go to templates and edit the calendar-template (Sample). Take the Code out of my posting and replace the calendar-template code with this code. Save/submit the code.

Step 4: Go to content > pages and edit any given page or create a new page where you should place {cms_module module="cgcalendar" display="calendar"} inside the content.

That's it. Run the page in frontend mode and it should at least display an unformatted version of your calendar. If you have some sample data in your calendar at least.

Regards
Nils

[Ivo Ivan]

Hi nils73

your solution doesn't work for me. Please, could you check it and help.

Step 1: no problem

Step 2: no problem. I created UDT named filter_weekdays and pasted blackhawks code there.

Step 3: with blackhawks template and changed

Code: Select all

{week}

to

Code: Select all

{filter_weekdays}

calendar shows 5 days from tuesday till saturday.
With your template and deleted

Code: Select all

{capture assign=dstvar}{dst}{/capture}

it shows only heading without date from, and no calendar.

[horton]

Hi,
I had been struggling with this for a long time. I was wondering also is anybody found any solution for this problem that persist in the end of the month?
Thanks.