CMS Made Simple Forums

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

(Solved)Fitting the calendar module into the sidebar

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

Page 2 of 2

Re: Fitting the calendar module into the sidebar

Posted: Thu Oct 18, 2007 1:42 pm
by RonnyK
Neo,

I think you lost me.

You wanted to show the details on a detail-page didn't you??

If you call the logic like you did, the detail-page won't be opened. Only after clicking on an event, that details will be opened in a new page, instead of replacing the current content.

Ronny

Re: Fitting the calendar module into the sidebar

Posted: Thu Oct 18, 2007 4:47 pm
by Dr.CSS
Is the calendar tag in the template or a content edit type box?...

Did you call the calendar in the test page in the same place, in the side bar, as in the first page you called it in and not in the main content?...

I think you need to put the calendar tag in the detail page in the main content area...

Re: Fitting the calendar module into the sidebar

Posted: Fri Oct 19, 2007 12:34 pm
by Neo
Hi Ronny,

Thanks for the insight  :). I modified the code in the test page and the code is below.

{cms_module module='Calendar' table_id='cal-event' display='list' detail='1'}

But now it lists all the events on all dates in the test page irrespective of which date i click. So is there any other parameter which I should include to restrict the details on the 'test' page to just one date? For example, if i click October 1, then the test page displays the events scheduled for all the days in October. I want to restrict the details only to October 1 in the test page.

Another problem is that the event details are still displayed in the sidebar also. I was looking at displaying the event details in the 'test' page and the calendar should still be visible in the sidebar when the main area displays the event details. Is this possible with the calendar module?

The link to the website is below.

http://cms.ce.gatech.edu/ceetest/

Thanks a lot for your help in this problem. Now I am getting close to solving the issue.

Thanks,
Neo

Re: Fitting the calendar module into the sidebar

Posted: Fri Oct 19, 2007 12:39 pm
by Neo
Hi Mark,

Currently the calendar tag for the sidebar is in the global content block since I needed the calendar to be visible in all the pages. The code currently in the GCB is

{cms_module module='Calendar' table_id='small' detailpage="test"}

The tag to display the details in the test page is in the main content area of test page i.e. I created a page called test and in the main content area of this page, I put the code below

{cms_module module='Calendar' table_id='cal-event' display='list' detail='1'}

But as I mentioned, the page 'test' now displays all the events irrespective of which date I click. Not sure which parameter to change for this. The link to the website is below.

http://cms.ce.gatech.edu/ceetest/

Thanks a lot for your help in this problem. Now I am getting close to solving the issue.

Thanks,
Neo

Re: Fitting the calendar module into the sidebar

Posted: Sun Oct 21, 2007 2:07 am
by Neo
Hi Mark,

I have put the calendar in the sidebar in the GCB in your demo site. But I could not add events to the calendar. Seems like the user does not have persmission to do that. But I have modified the stylesheet now to the one I am using. If you can give me permission to add events to the calendar, then I think I can set up the same design in your demo website.

I was trying to achieve the functionality in the original website in the link below.

www.gatech.edu

My website

http://cms.ce.gatech.edu/ceetest/

Thanks,
Neo

Re: Fitting the calendar module into the sidebar

Posted: Fri Oct 26, 2007 3:11 pm
by Neo
Hi all,

I think the calendar problem which I was facing is almost solved now. I thought of sharing the templates, style sheets and the modification in the php files in this post. It might help any one else who is also facing the same problem with the calendar module.

Website link:

http://ww2.ce.gatech.edu/

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}
List Template:

Code: Select all

<!-- <div id="{$table_id}">  -->
<div id="cal-list">
<div class="eventsummary">
	{foreach from=$events key=key item=event}
		<h3>{$event.event_title}</h3> <br>

		{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><br />
	{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><br />
	{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><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>
			{$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}
        <br>
{/foreach}
</div>
</div>
Upcoming Template:

Code: Select all

<!-- Calendar Upcoming List Template -->
<!-- Use with table_id "cal-list" -->
<div id="{$table_id}">
<div class="eventsummary">
	{if $compact_view neq 1}
	<!-- <h3>{$lang.upcoming_events}</h3> -->
	{/if}
	{foreach from=$events key=key item=event}
	<div id="all-events">
		<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>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]}  {$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>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]}  {$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>
			{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]}  {$event.event_date_start|date_format:"%Y"} {$lang.to} {$event.event_date_end|date_format:"%d"}  {$month_names[$end_month_number]} {$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>
</div>
Event Template:

Code: Select all

<!-- Calendar Event Detail Template -->
<!-- Use with table_id "cal-event" -->
<!-- <div id="{$table_id}">  -->
<div id="event">
<div class="eventsummary">
	<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>
		{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$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>
		{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$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>
{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %I:%M %p"} {$lang.to}  {$event.event_date_end|date_format:"%d"} {$month_names[$month_number]} {$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>
</div>
Stylesheet:

Code: Select all

/*
Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar' table_id='big'}

*/



/* make all links red */
.calendar tr td a
{
  color: #00447A;
}

/* highlight "today" for the small calendar */
.calendar-today
{
  font-weight: bold;e
}

/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
  display: none;
}

#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
  display: block;
  margin-right: 5px;
}

/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
  color: red;
  font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
  font-size: 110%;
}

/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big{
  margin: 0px;
  border-collapse:    collapse;
  border: 1px solid black;
}

/* nice squares for the #big table */
#big th
{
  border: 1px solid black;
  padding: 3px;
  width: 75px;
}

#big td {
  border: 1px solid black;
  vertical-align: top;
  padding: 3px;
  height: 75px;
  width: 75px;
}

/* format summaries nicely in #big */
#big ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
}

#big li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* background colours for #big */
#big td
{
  background-color: silver;
}

#big .calendar-day
{
  background-color: #80ff80;
}

#big .calendar-today
{
  font-weight: normal;
  background-color: #8080ff;
}

.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
  display: none;
}

/** Start small calendar rules (assuming table_id='small') **/
/* border on for #small */

div#calendar {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  padding-bottom: 3px;
  border: 2px solid #00447A; 
  background: #FFFFFF; /*B8B9BB; */
}

div#calendar h2 {
   line-height: 2em;
   background: #ffffff;
}

div#all-events {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  padding-bottom: 3px;
  border: 2px solid #CCCCCC; /*00447A; */
}

#small {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #CCCCCC; /*00447A;*/
}

/* nice squares for the #small table */
#small th
{
  /*border: 2px solid #00447A;*/
  background-color: #FFFFFF; 
  padding: 1px;
  width: 20px;
  /*color: #00447A;*/
  text-align: center;
  font: bold 10px/20px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
  color: #666;
  text-decoration: none; 
}

#small td {
  /*border: 1px solid #00447A;*/
  text-align: center;
  font: 10px/20px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
  color: #868686; 
}


/* format summaries nicely in #small */
#small ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 0px;
}

#small li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* background colours for #small */
#small td
{
  background-color: #FFFFFF;/*B8B9BB;*/
}

#small .calendar-month
{
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #B8B9BB;
  background-color: #f3f3f3;
  font: bold 10px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 3px 0px 3px 0px;
}

#small .calendar-day
{
  background-color: #FFFFFF; 
}


#small .calendar-today
{
  font-weight: bold;
	color: #868686;
	background-color: transparent;
	border: 1px solid #eeb211;
	padding: 1px;
}

/** End small calendar rules  **/

/*****************************************************
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: 14px/19px helvetica, verdana, geneva, arial, sans-serif;
	font-weight: bold;
	color: 333;
	text-decoration: none;
	margin: 0px;
	padding: 0px; 
}

#cal-list .calendar-date-from {
	font: 11px/17px Lucida Grande, Helvetica, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000; 
	margin: 0px 10px 0px 20px;
	padding: 0px;
}


#cal-list .cal-date-from-to {
	font: 11px/17px Lucida Grande, Helvetica, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000; 
	margin: 0px 10px 0px 20px;
	padding: 0px;
}

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

#cal-list .calendar-summary-title {
	font: 11px/17px Lucida Grande, Helvetica, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000; 
	margin: 0px 10px 0px 20px;
	padding: 0px;
}

#cal-list .calendar-details-title {
	font: 11px/17px Lucida Grande, Helvetica, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #000; 
	margin: 0px 10px 0px 20px;
	padding: 0px;
}
#cal-list .eventsummary {
	margin: 10px 10px 4px 20px;
	padding: 7px;
	border: 1px solid #d7d7d7;
	width: 525px; }

/*****************************************************
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 .eventsummary {
	margin: 10px 10px 4px 20px;
	padding: 7px;
	border: 1px solid #d7d7d7;
	width: 525px; }

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

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

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

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

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

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

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

#calendar-list .calendar-date-title {
	font-style: plain;
	font-weight: bold;
	font-size: 50%;
}

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

#calendar-list .calendar-details-title {
	font-style: plain;
	font-weight: bold;
	font-size: 50%;
	line-height: 1.5em;
}
Sidebar:

Code: Select all

{cms_module module='Calendar' table_id='small' detailpage="test" first_day_of_week='0'}
Detail Page:

Code: Select all

{cms_module module='Calendar' table_id='cal-event' display='list' detail='1'}
I also modified the CreateLink code in displaycalendar.php to display the details of the event in the detail page instead of it displaying in the sidebar itself.

Thanks a lot,

Neo

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Fri Oct 26, 2007 9:22 pm
by Xander
Thanks this looks good :)

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Wed Nov 14, 2007 3:13 am
by neel99
Can you please other files you modified here. I was trying to achieve the same. Thanks a lot.

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Wed Nov 14, 2007 7:11 pm
by Neo
Hi Neel,

I have attached the files alongwith. I have attached the files as txt files as it does not allow php files.

Regards,
Neo

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Wed Nov 14, 2007 7:55 pm
by neel99
Thanks my friend. I' m very good with photoshop, illustrator, if you ever need help, just email me.

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Fri Dec 14, 2007 6:38 pm
by carasmo
You are awesome!!!!!!!!!

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Fri Dec 14, 2007 11:57 pm
by carasmo
I'm following the instructions and I get the sidebar to display, but when you click on a date, instead of going to that date, it shows the entire month. Are there any files that I'm missing from what you posted here, what about your settings in the calendar module? What does that say?

Re: (Solved)Fitting the calendar module into the sidebar

Posted: Thu Feb 07, 2008 11:04 pm
by blagrang
Hi

I had the same problem. I solved this (inspired by NEO thanks for that) by modifying the function.displaycalendar.php file at line 118. I set the first parameter of the call to the function $module->CreateLinkto 'cntnt01' (hardcoded, that's bad I know but it works) iso $id (which apparently has a value of 'm8' when calendar is displayed).

Here is the piece of code modified:

Code: Select all

for($i = 1; $i <= $number_of_days_in_month; $i++)
	{
	  //$days[$i]['url'] = $module->CreateLink($id, 'default', $detailpage!=''?$detailpage:$returnid, $contents='',
	  //$params=array("return_id"=>$returnid,"detailpage"=>$detailpage,'year'=>$year, 'month'=>$month, 'day'=>$i, 'display'=>'list','return_link'=>1,'detail'=>1, 'lang'=>$module->curlang), '', true, $inline);
		$days[$i]['url'] = $module->CreateLink('cntnt01', 'default', $detailpage!=''?$detailpage:$returnid, $contents='',
			$params=array("return_id"=>$returnid,"detailpage"=>$detailpage,'year'=>$year, 'month'=>$month, 'day'=>$i, 
			'display'=>'list','return_link'=>1,'detail'=>1, 'lang'=>$module->curlang), '', true, $inline);
	  	$days[$i]['events'] = array();
	}
Hope it will help some of you.

Best regards
All times are UTC
Page 2 of 2

Powered by phpBB® Forum Software © phpBB Limited