Calendar action: make sidebar link open in main content

[heatherfeuer]

I'll bet that wasn't as clear as I would like it to be, but it should all make sense:

In the sidebar, I have a small version of the calendar (styled with table_id='small').  It's styled so that if there is an event, the event title is hidden but the day number will be a link to the event url that's supposed to open in the "main" part of the content area.  I thought I had done that, until I clicked on an event link this morning.  What actually happens is that the calendar switches to the list template in the sidebar.  If I include the detail_page='page alias,' the event page will open in the main part of the page, but doesn't show the event.

What I'm trying to do is have a small version of the calendar in the sidebar and if there is an event on any given day, have that day number be a link to the event detail page for that day's event, but have the small calendar in the sidebar not change to list mode.  However, when the large calendar is displayed in the "main" content section, I have it styled to show the event title as a link that opens in the event detail page (this works properly).  I have a subpage under the calendar page that lists all upcoming events using the "upcoming" template.

I'm wondering if I need to create a new calendar template just for the small one in the sidebar so I can make it act as I want (since parameters are apparently not doing what I want).  I found where in Calendar.module.php the templates are generated and I could probably duplicate and paste in a new template, but I'm not sure how to write the php and/or smarty code to make the template function as I want.

Is there anyone who could help me figure this out?  I'd sure appreciate it!

[RonnyK]

Heather,

do you have a link. I'm using

Code: Select all

     <!--start calender-->
      <div id="news">
         <h2>Agenda</h2>
        {cms_module module="Calendar" inline='0' detailpage="agenda"}
        </div>
      <!--end calender-->

for the calling and to style it like NEWS. This works. I only heard that the detailpage-option doesn't work in 0.7.7. You have to be on 0.7.8.

Ronny

[heatherfeuer]

Hi, Ronny,

I probably should have given a link.  You can see the problem at www.ffgf.org.  At the bottom of the sidebar, you will see the small calendar.  The 18th is highlighted because there is an event on that day.  When you click on it, you'll see the behavior that is the problem. 

I am using 0.7.8, and if you click on the Calendar link in the menu, you'll see the large calendar and if you click on the event title link on the 18th, you'll see the behavior I'm trying to mimic with the small calendar EXCEPT that I want the link in the small calendar to show up in the primary content window. 

For the detail template, I copied it out into my fav text editor and edited the template and stylesheet to get what I wanted.  Actually, once I figured out how they work, the templates and the sylesheet weren't that difficult to alter.  I did end up completely rewriting the stylesheet from scratch, though.

If you can help me figure out how to make the small calendar work, I'd sure appreciate it!!

[RonnyK]

Heather,

how do you call the small calendar. I showed you how I called mine. I also changed the template, deleted some lines, they are marked with "RK deleted" in the calendar template.

Code: Select all

{strip}
<table class="calendar" id="{$table_id}">
{if $compact_view neq 1}
<caption class="calendar-month"><span class="calendar-prev"><a href="{$navigation.prev}">«</a></span> {$month_names[$month]} {$year} <span class="calendar-next"><a href="{$navigation.next}">»</a></span></caption>
{/if}
<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}"> </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>
{* RK deleted
{if $summaries == true}
<ul>
{foreach from=$day.events item=event}
<li><a href="{$event.url}">{$event.event_title}</a></li> 
{/foreach}
</ul> 
{/if}
RK end deleted *}
{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}"> </td>
{/if}


</tr>
</tbody></table>

{/strip}

I call it using

Code: Select all

     <!--start calender-->
      <div id="news">
         <h2>Agenda</h2>
        {cms_module module="Calendar" inline='0' detailpage="agenda"}
        </div>
      <!--end calender-->

to have a similar styling as the news-box, I'm using. You can check

I don't fill the summary as I don't want add.info besides all data. Do you fill the summary as well??

Ronny

[heatherfeuer]

Ronny, THANK YOU!!!!   

I do use summaries because I have a menu link to upcoming events.  At some point, my client may choose to only display the upcoming events or the large calendar, but for now both options are in the menu.

What I was missing from the small calendar was the "inline" parameter.  When I put inline='0' as an additional parameter, I got the behavior I was looking for.

I hate it when it's something SO head-slapping obvious, and doubly grateful when someone can point it out to me.

[RonnyK]

heather,

what are you using for templates and styling for the calendar. I like your styling for upcoming-events.

Ronny

[heatherfeuer]

Seems only right to share, given your help!

I used the "Upcoming" template, but I made some minor changes so will post it all:

Code: Select all

<!-- Calendar Upcoming List Template -->
<!-- Use with table_id "cal-list" -->
<div id="{$table_id}">
	{if $compact_view neq 1}
	<!-- <h3>{$lang.upcoming_events}</h3> -->
	{/if}
	{foreach from=$events key=key item=event}
	<div>
		<h3>{$event.event_title}</h3>
		{assign var=month_number value=$event.event_date_start|date_format:"%m"}
		{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
		{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
		<div class="cal-date-from-to">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y"}
		</div><br />
		{else}
		{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
		<div class="cal-date-from-to">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y, %I:%M %p"} {$lang.to} {$event.event_date_end|date_format:"%I:%M %p"}
		</div><br />
		{else}
		<div class="cal-date-from-to">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y"} {$lang.to} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%d"},  {$event.event_date_end|date_format:"%Y"}
		</div><br />
		{/if}
		{/if}
		{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "<br />"))}
		<div class="calendar-summary">
			<span class="calendar-summary-title">
				{$lang.summary}: 
			</span><br />
			{$event.event_summary}
		</div><br />
		{/if}
		{if $detail == 1}
		{if $event.event_details !="" && $event.event_details != "<br />"}
		<div class="calendar-details">
			<span class="calendar-details-title">
				{$lang.details}: 
			</span><br />{$event.event_details}
		</div><br />
	{/if}
	{else}
		<a href="{$event.url}">{$moretext}</a>
		<br /><br /><hr class="hr" /><br />
	{/if}
	</div><br />
	{/foreach}
{if $return_url != ""}
	<div class="calendar-returnlink">
		{$return_url}
	</div>
{/if}
</div>

As for the styling, I pretty much rewrote the entire stylesheet, so will post it here for the edification of anyone who is interested:

Code: Select all

/*****************************************************
**** Style sheet for use with the Calendar Module ****  
**** Modified by:                                 ****
**** Heather Feuerhelm                            ****
**** Uniquely Yours Business Services             ****
**** http://www.uniquelyyourshosting.com          ****
**** To see this stylesheet in action, visit      ****
**** http://ffgf.selfip.org                   ****
**** Change the color scheme to match the site.   ****
******************************************************/

/* make all links stand out */
.calendar tr td a {
	color: #fffde8;
	background: #440062;
	text-decoration: none;
}

/*****************************************************
For use with the 'Calendar' template and the following
tag: {cms_module module='Calendar' table_id='big'}
******************************************************/
#big {
	margin: 0;
	padding: 3px; /* Create some room around the border */
	width: 100%;
	border-collapse: collapse; /* Prevents double borders around table cells */
	border: 2px solid #440062;
	background-color: #eddbff;
	color: #420060;
}

#big caption {
	font-size: 110%;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #420060;
	background: transparent;
   border: 2px solid #440062;	
	padding: 3px;
}

#big th {
	border: 1px solid #440062;
	background-color: #aa57ff;
	color: #fffde8;
	padding: 3px;
	width: 75px;
	text-align: center;
}

#big td {
	border: 1px solid #440062;
	background-color: #eddbff;
	color: #420060;  
	vertical-align: top;
	padding: 2px;
	height: 75px;
	width: 75px;
}

#big .calendar-today {
	font-weight: bold;
	background-color: #aa57ff;
	color: #fffde8;
}

#big .calendar-event {
	font-size: 80%;
	text-decoration: underline;
}

/*****************************************************
For use with the 'Calendar' template and the following
tag: {cms_module module='Calendar' table_id='small' inline='0'}
******************************************************/
#small {
	margin: 0 auto;
	padding: 3px; /* Create some room around the border */
	width: 90%;
	border-collapse: collapse; /* Prevents double borders around table cells */
	border: 1px solid #440062;
	background-color: #eddbff;
	color: #420060;
}

#small caption {
	font-weight: bold;
	font-size: 90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #420060;
	background: transparent;
   border: 1px solid #440062;
	margin: 0 auto;	
	padding: 1px;
}

#small th {
	border: 1px solid #440062;
	font-size: 80%;
	background-color: #aa57ff;
	color: #fffde8;
	padding: 3px;
	width: auto;
	text-align: center;
}

#small td {
	border: 1px solid #440062;
	font-size: 80%;
	background-color: #eddbff;
	color: #420060;  
	vertical-align: top;
	text-align: center;
	padding: 1px;
	height: auto;
	width: auto;
}

#small td a {
	color: #fffde8;
	background: #440062;	
	text-decoration: underline;
}

#small .calendar-today {
	font-weight: bold;
	font-size: 80%;
	background-color: #aa57ff;
	color: #fffde8;
}

/*
We don't want the event to display in the small calendar.
The date number will show a link to the event instead.
*/
#small .calendar-event {
	display: none;
}


/*****************************************************
For use with the 'Calendar' template and the following
tag: {cms_module module='Calendar' table_id='cal-list'}
These styles are intended for all list types used with
the display='[listtype]' parameter.
******************************************************/

#cal-list h3 {
	font-family: "trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	line-height: 1em;
}

#cal-list .cal-date-from-to {
	font-size: 110%;
	font-weight: bold;
}

#cal-list .calendar-date-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
}

#cal-list .calendar-summary-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5em;
}

#cal-list .calendar-details-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5em;
}

/*****************************************************
For use with the Event Template on a detail page with
the following module call:
{cms_module module='Calendar' table_id='cal-event' 
display='list' detail='1'}
******************************************************/

#event h3 {
	font-family: "trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	line-height: 1em;
}

#event .cal-date-from-to {
	font-size: 110%;
	font-weight: bold;
}

#event .calendar-date-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
}

#event .calendar-summary-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5em;	
}

#event .calendar-details-title {
	font-style: italic;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5em;
}

Enjoy!

[Nullig]

It still doesn't seem to work right when you change the small calendar to April and click on one of the links there.

I also noticed that when you click on the Mar 18 date and are taken to the event, there are next and prev links that take you to a small calendar, instead of the next/prev event. Also, in these small calendars, the events are hidden until you hover over the day and the calendar format is skewed.

Not sure if that's the behaviour you want - just thought I'd let you know, in case it isn't.

Nullig

[heatherfeuer]

Thanks, Nullig.  I'll check it out.  Sounds like I still need to do some tweaking with the parameters.  And that has been the problem I've had most with the Calendar module -- how to get the parameters right.

[RonnyK]

Thanks Heather for providing your logic (Karma provided),

I noticed the behaviour Nullig described also. But that is already the case in the default install when you use the logic to show the details on a different page, so next/previous brings you back to the calendar.

EDIT:
Could you also provide the template for the other tabs, as my logic is now different and all styling is gone.

Ronny

[heatherfeuer]

Not a problem!

Calendar template (for both large and small calendars):

Code: Select all

{strip}
<table id="{$table_id}">
	{if $compact_view neq 1}
	<caption class="calendar-month">
		<span class="calendar-prev">
			<a href="{$navigation.prev}">«</a>
		</span>
		 {$month_names[$month]} {$year} 
		<span class="calendar-next">
			<a href="{$navigation.next}">»</a>
		</span>
	</caption>
	{/if}

	<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}">
				 
			</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 $day.class}class="{$day.class}"{/if}> <!-- Check for current day -->
				{if $day.events.0}<a href="{$day.url}" alt="{$event.event_title}">{$key}</a> <!-- If there is an event, make that date a link -->
				{if $summaries == true}
					{foreach from=$day.events item=event} <br />
					<span class="calendar-event"><a class="calendar-event" href="{$event.url}" alt="{$event.event_title}">{$event.event_title}</a></span>
					{/foreach}
				{/if}
				{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}">
				 
			</td>
			{/if}
		</tr>
	</tbody>
</table>
{/strip}

List template (but I don't use it on the current site):

Code: Select all

<div class="calendar-list" id="{$table_id}">
{if $compact_view neq 1}
	<span class="calendar-prev">
		<a href="{$navigation.prev}">{$lang.prev}</a>
	</span> 
	    
	<span class="calendar-next">
		<a href="{$navigation.next}">{$lang.next}</a>
	</span>

	<!-- Use headers smaller than h2 to prevent conflict with page title -->
	<h3>{if $day > 0}{$day} {/if}{$month_names[$month]} {$year}</h3>
{/if}
	{foreach from=$events key=key item=event}
	<div class="calendar-event">
		<h4>{$event.event_title}</h4>
		{assign var=month_number value=$event.event_date_start|date_format:"%m"}
		{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
		{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
		<div class="calendar-date-from">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}
		</div>
	{else}
	{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
		<div class="calendar-date-from">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%H:%M"}
		</div>
	{else}
		<div class="calendar-date-from">
			<span class="calendar-date-title">
				{$lang.date}: 
			</span>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%d"} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%Y %H:%M"}
		</div>
	{/if}
	{/if}
	{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "<br />"))}
		<div class="calendar-summary">
			<span class="calendar-summary-title">
				{$lang.summary}: 
			</span>
			{$event.event_summary}
		</div>
	{/if}
	{if $detail == 1}
		{if $event.event_details !="" && $event.event_details != "<br />"}
		<div class="calendar-details">
			<span class="calendar-details-title">
				{$lang.details}: 
			</span>{$event.event_details}
		</div>
		{/if}
	{else}
		<a href="{$event.url}">{$moretext}</a>
	{/if}
	</div>
{/foreach}
{if $return_url != ""}
	<div class="calendar-returnlink">
		{$return_url}
	</div>
{/if}
</div>

Event template:

Code: Select all

<!-- Calendar Event Detail Template -->
<!-- Use with table_id "cal-event" -->
<div id="{$table_id}">
	<h3>{$event.event_title}</h3>
{assign var=month_number value=$event.event_date_start|date_format:"%m"}
{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="cal-date-from-to">
		<span class="calendar-date-title">
			{$lang.date}: 
		</span>
		{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y"}
	</div><br />
	{else}
	{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	<div class="cal-date-from-to">
		<span class="calendar-date-title">
			{$lang.date}: 
		</span>
		{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y %I:%M %p"} {$lang.to} {$event.event_date_end|date_format:"%I:%M %p"}
	</div><br />
	{else}
	<div class="cal-date-from-to">
		<span class="calendar-date-title">
			{$lang.date}: 
		</span>
		{$month_names[$month_number]} {$event.event_date_start|date_format:"%e"}, {$event.event_date_start|date_format:"%Y %I:%M %p"} {$lang.to} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%d"}, {$event.event_date_end|date_format:"%Y %I:%M %p"}
	</div><br />
	{/if}
	{/if}
	{if $event.event_summary !="" && $event.event_details ==""}
	<div class="calendar-summary">
		<span class="calendar-summary-title">
			{$lang.summary}: 
		</span><br />
		{$event.event_summary}
	</div><br />
	{/if}
	{if $event.event_details !="" && $event.event_details != "<br />"}
	<div class="calendar-details">
		<span class="calendar-details-title">
			{$lang.details}: 
		</span><br />
		{eval var=$event.event_details}
	</div><br />
	{/if}
	<div class="calendar-returnlink">
		{$return_url}
	</div>
</div>

I think you will find that I didn't make any real fundamental changes to the templates other than editing style assignments and date display.

I've been working on a couple of desktop publishing jobs and once I wrap up the second one (hopefully today or tomorrow) I want to REALLY start playing around with CMSms.  I plan to revamp my personal website to put it into CMSms and I want to finish creating a "testsite" where I can experiment with layouts, modules and tags so I can become more familiar with the CMS and provide a "demo" for potential clients.

[Nullig]

Excellent work on the calendar templates.

I can't wait to see what you come up with when you really sink your teeth into CMSMS.

Nullig

[mktdom]

Hello,

I am very interested by this BIG calendar on main page : how to obtain it ? css ? or template ?

http://www.ffgf.org/index.php?page=calendar

Thx in advance

(I tried all code modification above, in this topic but i did'nt find how to have the big one)

[heatherfeuer]

Make sure that under Content --> Calendar you have the Calendar template pasted in from the above listed.  Also make sure that you paste into the Calendar css.  Once you've done that (and it sounds like you have), you need to create a new page.  Make the page title something like "Calendar of Events" or whatever you want.

In the content wysiwyg window put this module call:
{cms_module module='Calendar' table_id='big' first_day_of_week='0' detailpage='event_detail'}

You might want to edit it for your locale, but that's pretty much it.

I also created a separate "event detail" page under pages, but under options, unchecked the show in menu.  It only needs to be seen when someone clicks on "more."  That page gets a module call like this:
{cms_module module='Calendar' table_id='cal-event'  detail='1'}

That should do it!