CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[SOLVED] Weekly Calendar with CG Calendar

https://forum.cmsmadesimple.org/viewtopic.php?t=53245

Page 1 of 1

[SOLVED] Weekly Calendar with CG Calendar

Posted: Thu Mar 31, 2011 10:39 pm
by 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

Re: Weekly Calendar with CG Calendar

Posted: Wed Apr 06, 2011 12:19 pm
by blackhawk
If using the default monthly calendar template, I think the key is to filter which <tr> you want to display. Looking into it...

Re: Weekly Calendar with CG Calendar

Posted: Thu Apr 07, 2011 12:41 pm
by 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!

Re: Weekly Calendar with CG Calendar

Posted: Mon Jun 06, 2011 8:15 am
by nils73
blackhawk wrote: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

Re: [SOLVED] Weekly Calendar with CG Calendar

Posted: Tue Jun 14, 2011 5:10 pm
by lowestman
Could you give me a little more instruction on how to use this?

Re: Weekly Calendar with CG Calendar

Posted: Tue Jun 28, 2011 8:57 pm
by 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?

Re: [SOLVED] Weekly Calendar with CG Calendar

Posted: Thu Jun 30, 2011 4:33 pm
by nils73
lowestman wrote: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

Re: [SOLVED] Weekly Calendar with CG Calendar

Posted: Sat Nov 05, 2011 8:55 pm
by 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.

Re: [SOLVED] Weekly Calendar with CG Calendar

Posted: Thu Nov 28, 2013 8:24 am
by 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.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited