CGCalendar: Handling the calendar and the list and event templates

[Yvan B]

Hi there !

I've created a small and pretty calendar that I want to show below my menu, on all my web-site pages (it's in the end very similar to the default one). My problem is when I change the month, I'm redirected to another page where I can browse the months at will. I want to do the same without leaving the page I'm visiting.

I wanted to modify {$navigation.prev} and {$navigation.next}, but I can't find any info on these tags.

Can anyone give me a clue ?

You can see my calendar here :   http://www.coord21.ch/test_cmsms/

Thanks !  :)

[Peciura]

Lets say you have calendar template like this. It is important to have calendar wrapping div .

{strip}




{*importamt*}
«

 

{$month_names[$month]} {$year}


{*importamt*}
»





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

{$day_short_names[$key]}

{/foreach}


{* initial empty days *}
{if $first_of_month_weekday_number > 0}

{/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}


{/if}


{if isset($day.class)}

{/if}
{if isset($day.events.0)}
{assign var='cgcalendar_multiple_category' value=''}
{assign var='first_category' value=''}
{foreach from=$day.events item=event}
{foreach from=$event.categories item=category}

{/foreach}
{/foreach}

{if !empty($cgcalendar_multiple_category)}

{/if}

{$key}

{if !empty($cgcalendar_multiple_category)}

{/if}

{foreach from=$day.events item=event}
{foreach from=$event.categories item=category}
 
{/foreach}
{/foreach}



{foreach from=$day.events item=event}


{$event.event_title}


{/foreach}



{else}
{$key}
{/if}

{if isset($day.class)}

{/if}


{math assign=weekday equation="x + 1" x=$weekday}
{/foreach}

{* remaining empty days *}
{if $weekday != 7}

{/if}




{/strip}

Add this jQuery function to template or page just make sure you do not include jQuery library more than once in whole page template.

{literal}{*include it just once in whole page template*}

{/literal}

{literal}

$(document).ready(function(){
$("span.calendar-next a,span.calendar-prev a").click(function updateCGCalendar(event){
event.preventDefault();
var nav_link = $(this).attr("href");

var parent_div = $(this).parent().parent().parent().parent();
parent_div.load(nav_link+' #cal-calendar',function(){
$("span.calendar-next a,span.calendar-prev a").click(updateCGCalendar).preventDefault();
});
});
});

{/literal}

EDIT : It is important to match "parent()" number in jQuery and number of parent elements of navigation links in calendar template.

[Yvan B]

Wow ! Many thanks ! 

I changed the links for the next and previous month to match your own and it works just fine. It's really cool, but I have to admit I don't understand at all how your code function. What is a 'wrapping div' and how come it's useful when I can't see anywhere it's actually used ? What are these '&showtemplate0 false' ? And where does this javascript come from ?

I also have to thank you for the calendar, cause I actually used the code you showed in another topic.

So, thanks again !

[calguy1000]

Did you guys even check out the help for the 'inline' and session stuff....

[Yvan B]

Did you guys even check out the help for the 'inline' and session stuff....

I had missed it ! Guess I was tired when I started looking... Sorry

use_session will be useful. But I read that the default value of inline is 0 and that if I set it at 1, the links for the events will replace the content of the page... I don't know if the french translation I have is all wrong (ver. 1.5.2), but it doesn't sound like 'You're calendar won't load instead of your page content'.

I tried it and it works very well. That's a very useful option, calguy !

Btw, did you change something for the title of the events ? I remember that I could use special caracters before and now I can't anymore... Or maybe I was wrong.

Thanks a lot anyway !

[Peciura]

I chose jQuery simply because it works with multiple calendars ( or at least i had some issues with that stuff). Also it is quicker to load small calendar than all page.

[Yvan B]

I chose jQuery simply because it works with multiple calendars or at least i had some issues.

From what I've just seen (with no multiple calendars though), it works very well.

Btw, do you know why this line :
{if $day > 0}{$day}{/if}
outputs 'Array' when no day is specified (like in all the list templates) ?

EDIT: actually, i just noticed a problem. Now, if I click on one of the days of my calendar, the details of the events happening on that day replace the calendar... (which is all wrong)
How come that {$day.url} has not the same behaviour than {$event.url} ? How can I manage this ?

I also noticed that, when I move to a page with another template (but where the calendar also appears), for instance when I log in, the session is different. I can be seeing 'may' on regular pages and 'april' on member's pages. How can I change this for the month to stay the same ?

Thanks !

[Yvan B]

Hey. I think I managed to make things work my way (though it seams that the yearlist is acting in a weird way with the calendar, maybe you would want to make a few tests, calguy).
The only thing is that when I select a day on my calendar, it is replaced by an eventlist. How can I make the calendar not to change while the page content shows the eventlist ?

Thank you !

[Yvan B]

I still have one last problem :

When I pick a day on my calendar, I want the calendar to remain unchanged and the content to show an eventlist with all the events happening on that day.
But what happens is that the content is replaced by the eventlist of the month (wrong) AND the calendar is replaced with the eventlist of the day (more wrong).

Here is the call for the calendar:
{cms_module module='CGCalendar' display="calendar" calendartemplate="petit_calendrier" listtemplate= "agenda_coord21" eventtemplate="event_coord21" use_session="true" detailpage="agenda" inline="1"}

Here's the code:
{strip}

 
     
        « 
     
        {$month_names[$month]} {$year}
     
          »
     
 
 
     
        {foreach from=$day_names item=day key=key}
            {$day_short_names[$key]}
        {/foreach}
     
      {* initial empty days *}
        {if $first_of_month_weekday_number > 0}
           
        {/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}
               
               
            {/if}

            {*if isset($day.class)} {YB: calendar_today ou rien}
            *}
   
            {if isset($day.events.0)}
             
                 
                  {$key}
                 
                     
                        {foreach from=$day.events item=event}
                          {$event.event_summary}
                        {/foreach}
                     
                 
            {else}
             
                 
                    {$key}
            {/if}
           
         
          {math assign=weekday equation="x + 1" x=$weekday}
      {/foreach}

      {* remaining empty days *}
      {if $weekday != 7}
         
      {/if}
   
 

{/strip}

And you can check the calendar here:
http://www.coord21.ch/test_cmsms

Any clue would be appreciated ! Thanks !

[Yvan B]

Ok, I still have no clue about this, so if anyone could help, it would be much appreciated.

Where can I find a list of all the variables that are available in the calendar template ?
Why does 'inline="1"' have no effect on my calendar ?
Is there a way to make a link to a month list from the calendar ? Where can I find this kind of info ?

Can anyone give me a hand ? Thanks

[Peciura]

When I pick a day on my calendar, I want the calendar to remain unchanged and the content to show an eventlist with all the events happening on that day.
But what happens is that the content is replaced by the event list of the month (wrong) AND the calendar is replaced with the event list of the day (more wrong).

IMO you can not have calendar at the same time inline and not  (inline month navigation but not event list from the same calendar).  That is where jQuery comes in - to make some links inline and keep  other as they were.

Where can I find a list of all the variables that are available in the calendar template ?

{get_template_vars} outputs all available variables other options are here http://forum.cmsmadesimple.org/index.ph ... #msg204523

Is there a way to make a link to a month list from the calendar ?

General answer is yes, that stuff smarty does. http://forum.cmsmadesimple.org/index.ph ... #msg204611 This template generates table of any calendar number. If you set column number to 1 and change {CGCalendar} template you will get month list. Than you have to decide where and how do you want to display info for each month in from list.

[Yvan B]

IMO you can not have calendar at the same time inline and not  (inline month navigation but not event list from the same calendar).  That is where jQuery comes in - to make some links inline and keep  other as they were.

I see. Would you know why when I select a particular event, the event is shown in the content and not inline ?

[Peciura]

Would you know why when I select a particular event, the event is shown in the content and not inline ?

I guess it is made so because absolute majority of users need this behaviour . It is not an issue - just the way it works.
Do similar thing you tried with calendar navigation and you will have  inline events. Add id ('one_calendar_event') to div surrounding one event in appropriate  "Event Template"

{$event.event_title}
...

and here is your jQuery

{literal}

$(document).ready(function(){
$(".cgcalendar_info ul li a").click(function updateCGCalendar(event){
event.preventDefault();
var event_link = $(this).attr("href");
/* alerter is good way to inspect some variables like url */
/*alert(nav_link+'&showtemplate=false'+'#one_calendar_event'); */
$('#calendar').load(event_link+'&showtemplate=false'+'#one_calendar_event');
});
});

{/literal}

I assume you have only one calendar in and each calendar day is of class 'cgcalendar_info'

[Yvan B]

I guess it is made so because absolute majority of users need this behaviour . It is not an issue - just the way it works.
Do similar thing you tried with calendar navigation and you will have  inline events.

I'm very sorry, Peciura, but I think there's a misunderstanding. I don't want inline events. I just want inline navigation in the calendar and my only problem is when I click on a particular day. That's the reason I asked why the events were not shown inline: I want to do the same with the days !

Anyway, I gave another shot to your code and I have 2 problems left:
- it is not compatible with the use_session parameter. Is there then another way not to be sent back to the current month when you browse the website ?
- When I get to the eventlist, if I try to browse in it, it will show a calendar and not an eventlist anymore... And I don't get why actually.

EDIT: Nevermind about the browsing in the eventlist: I just had to change the class name of the span for the links to the previous and next month. The other question remain though. It would be awesome if anyone could give me a hand on this !

[Peciura]

OK. I thought you we using parameter inline=1.

To show event list of the day with jQuery, it is enough  change 'cgcalendar_info ul li' to 'cgcalendar_content' and '#one_calendar_event' is also useless:

{literal}

$(document).ready(function(){
   $(".cgcalendar_content a").click(function updateCGCalendar(event){
event.preventDefault();
      var event_link = $(this).attr("href");   
/* alerter is good way to inspect some variables like url */
/*alert(nav_link+'&showtemplate=false'); */
      $('#calendar').load(event_link+'&showtemplate=false');
   });
});

{/literal}