Page 1 of 1

CGCalendar custom field call

Posted: Tue Oct 29, 2013 12:31 pm
by jakovbak
Hello everyone!
I've been playing with CGCalendar for awhile and on my testpage situation looks like this:
- On my starting page there's a list of events from all categories (in summary mode), sorted by date (starting from today);
- A click on event's title gives me detail text of that event.

And there comes my first problem...

Problem No. 1:
I have modified Sample Detail Template but nothing too serious. Now, I don't know how to make the call for an image uploaded via custom field to be displayed in detail view. I would also like to display that image at the very top of detail view and some extra text at the bottom. But I don't know how to split the default call. This is how it looks in the template:

Code: Select all

{*	Display custom fields
			There are two ways to address custom fields
			1)	{$event.fields.fieldname}
			2)	{foreach from=$event.fields key='fieldnamee' item='fieldvalue'}
					{$fieldname}: {$fieldvalue}
				{/foreach}
			You may want to use the former method with file upload fields.
		*}

		<div class="calendar-fields">
			{foreach from=$event.fields key='fieldname' item='fieldvalue'}
				<!-- {$fieldname}:&nbsp; -->{$fieldvalue}<br/>
			{/foreach}
		</div>
As you can see (you, to whom I envy now on your coding skills :-) ), this call brings all of the custom fields together. My custom fields were named eventimage (file upload field) and extratext (text area field). There is no problem displaying 'extratext' but instead of image, 'eventimage' field gives only the name of uploaded image.

At the end, the Return link of detail event view is not actually a 'link back' but a link to default Calendar page.

Problem No. 2:
The calendar itself... It's in the sidebar, nothing fancy, just plain calendar grid 270x270 px with "prev - Month - next" navigation at the top and the date-grid below. I found nothing on this forum nor documentation related to setting up calendar to work as - let's say - alternative navigation/search. If one clicks on a date, it brings the list of events for that day within the calendar area and the calendar-grid in main content area (which means we're back on the "Default Calendar Page" again...). But I would like to call for that events-list in main content area while the calendar remains in it's grid view in the sidebar.

I'm just a designer and my coding skills are not up to this so I could really use some help! I'll apprecieate any idea or direction on how to solve this issue. Thank you in advance!
Regards,
Jakovbak

Re: CGCalendar custom field call

Posted: Tue Oct 29, 2013 12:53 pm
by velden
Here we are again:

1: it's a Calguy module so it could well be that it is made the way like the News module. The image fields's value is only the (complete) filename and there is an extra variable for the rest of the path.

From a default News template:

Code: Select all

{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
     <div class="NewsDetailField">
        {if $field->type == 'file'}
	  {* this template assumes that every file uploaded is an image of some sort, because News doesn't distinguish *}
          <img src="{$entry->file_location}/{$field->value}"/>
        {else}
          {$field->name}:&nbsp;{eval var=$field->value}
        {/if}
     </div>
  {/foreach}
{/if}
note the {$entry->file_location}

Use a {debug} tag in your template and enable popups. Then look for the variables when opening the front end page with event details.

2: maybe use some Ajax for this so the page does not refresh every time? Have a look at this article: http://calguy1000.com/Blogs/9/60/jquery ... -news.html

Re: CGCalendar custom field call

Posted: Wed Oct 30, 2013 12:04 pm
by jakovbak
Hello Velden!
Sorry for delayed answer, it's been a hell of a busy day yesterday.
I knew I've seen something like this before, just couldn't remember when and where!
Number 2 is a bit blurry, I have to study it more and look for some more articles on that topic but at least now I know where to start. I'm not familiar with ajax, php, smarty... so I have to dig deeper than usual. Thought it would be something simpler but, hey, it is the way it is...
Thank you for helping me out and have a nice day!
Regards,
Jakovbak

Re: CGCalendar custom field call

Posted: Sun Nov 03, 2013 12:45 pm
by jakovbak
Hello everyone!
I'm trying to figure out the solution for CGCalendar custom field as Velden suggested but this other thing - "Calendar-As-Navigation" is really bugging me! Even more, I came to a same solution for another issue - going back from Fancybox login form to my Homepage - it can also be achieved with some Ajax coding but I can't figure out how to write the call.
Does anyone knows some good tutorial with examples from which I can start?
For example:
In login form under Fancybox, if user clicks "Submit" button, destination page is being opened within the Fancybox iframe. But I want the Fancybox to be closed and destination page should be opened in main browser window.
I know it can be achieved via Ajax but I have never used it before. And it can be used to solve the way of using CGCalendar as described at the beginning of this topic.
I'll apprecieate any suggestion!
Thank you in advance and have a nice day!
Regards,
Jakovbak

Re: CGCalendar custom field call

Posted: Tue Nov 05, 2013 8:48 am
by velden
Example:

Somewhere in head of your page TEMPLATE or metadata:

Code: Select all

<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></__script>
note: just example, as long as jQuery is loaded it should work.

Sidebar of your page TEMPLATE:

Code: Select all

<div id="sidebar-cal">
  {cms_module module="CGCalendar" inline=0 action="default"}
   </div>
note: inline=0 is already default but it should NOT be inline=1

Somewhere in your template, where you want to show the calendar details:

Code: Select all

<div id="calendar" style="min-height 40px; border: 1px solid red;"> </div>
note: styling just for this example

CGCalendar: Calendar Display Template

Code: Select all

{strip}

{* javascript stuff that will perform ajax calls *}
<__script__ type='text/javascript'>
/* <![CDATA[ */
{literal}
function ajax_load(url,dest)
{  
 var tmp = url + "&showtemplate=false";
 var tmp2 = tmp.replace(/amp;/g,'');
 $(dest).load(tmp2); 
}
{/literal}
/* ]]> */
</__script>

<table class="calendar" id="cal-calendar">
<caption class="calendar-month"><span class="calendar-prev"><a href="{$navigation.prev}" onclick="ajax_load('{$navigation.prev}','#sidebar-cal'); return false;">&laquo;</a></span>&nbsp;{$month_names[$month]}&nbsp;{$year}&nbsp;<span class="calendar-next"><a href="{$navigation.next}" onclick="ajax_load('{$navigation.next}','#sidebar-cal'); return false;">&raquo;</a></span></caption>
<tbody><tr>
{foreach from=$day_names item=day key=key}
<th 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}"{/if}>
{if isset($day.events.0)}<a href="{$day.url}">{$key}</a>
<ul>
{foreach from=$day.events item=event}
<li><a href="{$event.url}" onclick="ajax_load('{$event.url}','#calendar'); return false;">{$event.event_title}</a>
{*<a href="{$event.url}">{$event.event_title}</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}
Little explanation of the calendar template:

Code: Select all

previous month link:
<a href="{$navigation.prev}" onclick="ajax_load('{$navigation.prev}','#sidebar-cal'); return false;">

next month link:
<a href="{$navigation.next}" onclick="ajax_load('{$navigation.next}','#sidebar-cal'); return false;">

result from two links above are showed in div with id 'sidebar-cal'

event detail link:
<a href="{$event.url}" onclick="ajax_load('{$event.url}','#calendar'); return false;">
result from this link is showed in div with id 'calendar'

Re: CGCalendar custom field call

Posted: Tue Nov 05, 2013 12:36 pm
by jakovbak
Velden,
you are a great, great man!!!
Jakovbak

Re: CGCalendar custom field call

Posted: Tue Nov 05, 2013 12:40 pm
by velden
jakovbak wrote:Velden,
you are a great, great man!!!
Jakovbak
Tell that to my girlfriend ;D

And thank Calguy, he developed the module and wrote the manual I almost literally copied.

Glad it is helpful though.

Re: CGCalendar custom field call

Posted: Wed Nov 06, 2013 7:17 am
by jakovbak
It was more than helpful! I have tried Calguy's tutorial too but I took literary approach and it didn't work for me. Guess your "almost literary" thing was crucial and did the job. Of course, thank's to Calguy not only for his Calendar Module but for all of the other great, useful and stabile modules as well!
Now I'm on fine tuning of my Events and I'll be back with updates on my progress and, naturally, some more questions will follow... :-)

P.S. Just show my previous post to your girlfriend... :-D