(Solved)Fitting the calendar module into the sidebar

[Neo]

Hello all,

I had installed the calendar module and tried to include the calendar in the side bar. But the problem is that the calendar size is very big and could not fit into the side bar. The result is that the calendar is overlapping with the main section of the website. I tried to play around with the "#big td" and "#big th" tags in the Calendar stylesheet but it does not seem to have any effect.

The URL for the website is below.

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

Since I am currently trying to resolve this problem, I have also given a screenshot of the encountered problem.

http://kaushik.oracle3.googlepages.com/ ... r-full.jpg

Any pointers on how to change the calender to fit into the side bar would be very helpful.

Thanks,
Neo

[RonnyK]

Neo,

if you check www.ruimzicht.eu, that is the way I did recently. If you like the looks, I can give you the calling/stylesheet.

Ronny

[Neo]

Hi Ronny,

Thanks a lot for the response  . I was also looking at something like your website. It would be great if you can provide the stylesheet.


Thanks,
Neo

[RonnyK]

Neo,

my logic/stylesheet etc.....

Calling in a content-page for the upcoming year.

Code: Select all

{cms_module module="Calendar" table_id="cal-list" display="upcominglist"}

Calling in template (sidebar):

Code: Select all

{cms_module module='Calendar' inline=0 detailpage="kalender" first_day_of_week='0' table_id='small'}

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">
	{foreach from=$events key=key item=event}
		<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="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}
{/foreach}
{if $return_url != ""}
	<div class="calendar-returnlink">
		{$return_url}
	</div>
{/if}
</div>

Upcoming template:

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 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>

Event template:

Code: Select all

<!-- Calendar Event Detail Template -->
<!-- Use with table_id "cal-event" -->
<!-- <div id="{$table_id}">  -->
<div id="event">
	<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>

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: inline;
  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: #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 #00447A; 
}
#small {
  width: 95%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #00447A;
}

/* nice squares for the #small table */
#small th
{
  border: 2px solid #00447A;
  background-color: #B8B9BB;
  padding: 1px;
  width: 20px;
  color: #00447A;
  text-align: center;
}

#small td {
  border: 1px solid #00447A;
  vertical-align: middle;
  text-align: right;
  padding: 1px;
  height: 20px;
  width: 20px;
}

/* 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: #B8B9BB;
}

#small .calendar-month
{
  padding: 0 0 5px 0;
}

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

#small .calendar-today
{
  font-weight: bold;
}

/** 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-family: "trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	line-height: 1em;
}

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


#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;
}

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

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

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

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

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

Ronny

[Neo]

Hi Ronny,

Thanks a lot for the code  . It is better than the original calendar module placed in the sidebar. But there are a few problems on which I am currently working on. But I do not have much idea about solving a couple of them. It would be great if you can provide pointers to them.

1. The calendar detail page is not formatted properly. For example, I have added an event on October 1, 2007. So when I click this date, the detail page is not formatted properly. Moreover, the calendar is no longer displayed in the sidebar. So I am not sure how should I go about in formatting the detail page. Additionally the calendar should also be visible in the sidebar in the detail page.

2. The size of the calendar should be within the size of the sidebar. So should I make changes to the calendar stylesheet for this? I was looking into the calendar stylesheet for table id="small" but could not find any size parameters to change the calendar size.

The link to the website is below.

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

I was planning to get the functionality in the original website whose link is below.

http://www.gatech.edu

Thanks a lot,
Neo

[Dr.CSS]

You are looking for something like this?...

http://multiintech.com/debra/index.php/blog.html  calendar on left...

You need to change the en_US.php file to give you single letter abbreviations then call it in your calendar tag, only because I wanted to use it in more than one place I renamed the lang. file then called it in the tag...

[Neo]

Hi Mark,

I was looking for the same design as in your website. Thanks for the information  . I modified the en_US.php and now the calendar is fitting correctly into the sidebar. But I also wanted to have events on the calendar and an event detail page which shows up when the user clicks the date.

Although the functionality is already there in the calendar module, the event detail page is not formatted properly and the calendar is not shown in the event details page. I am still researching on the code to modify so that I can achieve this formatting and display.

Also in your calendar, the next and previous button for displaying the month are near the month name but for me, the next and the previous buttons are on separate lines (above and below the month name).

Please let me know if you have any pointers on how to go about these two problems?

I have given the URL to the website (which has a sample event on October 1st)

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

Thanks,
Neo

[Dr.CSS]

You have it inside of a li that has the links set to display:block so the next/prev links are taking a space/line of their own...

You may want to consider using a div/CSS layout....

Research Lab Support

    Building Support
   
    « November 2007 »SMTWTFS 123456789101112131415161718192021222324252627282930 

   

 

[Neo]

Hi Mark,

Thanks for the response  . It seemed to have resolved the previous and next button problem. But I am still facing the problem in scheduling events with the calendar. For example, when I click the event scheduled on October 12, the event details are displayed in the same place as the calendar and the page is not formatted properly. The calendar is no longer displayed in the detail page. The link to the website is below.

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

Any pointers to resolve this problem would be very helpful.

Thanks a lot,
Neo

[Dr.CSS]

Some how you are getting this line in your code, not sure how you are writing the {tag}, this line makes it stay in the same content box it started, the display:inline part, the rest of the information is a few 's and a lot of
's if it's just 's then it will word wrap...



Check your editor settings for line breaks option it may be set to
...

[Neo]

Hi Mark,

I removed the display:inline from the calendar tag but it does not  seem to resolve the problem. The original tag which I had in the sidebar for calendar was

Code: Select all

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

Now, I modified the calendar tag and changed the inline parameter to 1 instead of 0. But now, the details are displayed within the sidebar and the detail page "test" is blank. Not sure if this is the intended behaviour of the calendar module.

Code: Select all

{cms_module module='Calendar'  inline='1' detailpage="test" first_day_of_week='0' table_id='small'}

I also tried different combinations of parameters of the calendar module like summaries, detailpage, inline but none of them seem to display the events in the page "test". All these parameters display the event details within the sidebar itself. Please let me know if you have any ideas on this.

The site link is below

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

Thanks,
Neo

[Dr.CSS]

I would just use...

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

[Neo]

Hi Mark,

I have used the code below in the template now. But it does not seem to resolve the problem. The event details are displayed within the sidebar itself although the calendar help says that the event details should be displayed in page "test". Not sure if there is any other problem here. I am trying to understand the php code now. Please let me know if you have any pointers to this.

Code in template:

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


Thanks a lot,
Neo

[RonnyK]

Neo,

do you have a page with page-alias "Test" and status "active". It looks for the page-alias and it must be active to be able to call it.

Ronny

[Neo]

Hi Ronny,

The page alias is "test" and the page is active. The code in this page to display the calendar event details is below.

{cms_module module="Calendar" table_id="cal-list" display="upcominglist"}

Please let me know if there is a problem in this code.

Thanks,
Neo