CMS Made Simple Forums

Posted: **Wed Mar 21, 2007 8:28 pm**

I use the calling of calendar with table_id = "small". This opens a small calendar. If a date is pressed that holds an event, it opens

I call it like:

Code: Select all

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

The table_id is than something like (in the source):

I can't pass a different table_id, as it is opened through clicking on the calendar itself, any ideas how to pass a table-id that I choose for styling.

Ronny

Posted: **Wed Mar 21, 2007 10:56 pm**

You'd style the calendar using the container it's in, if the main content container is #content

then it would be #content .calendar etc.

My main content is #main or #maincol

You can see it in action at: http://www.dropsoul.com/testCMSMS/

Here's my calendar CSS (some of it may be relevant, but you have to know bit about CSS and specificity -- if that's the word):

I also slightly modified the calendar templates, but mostly stuff was done with CSS and hiding stuff that I didn't want.

/***********************************************/
/****** Calendar ******/
/***********************************************/

.eventcalendar .noshow {display:none;}

#rightcolumn #calheadersidenoshow {display:none;}

#maincolumn .calendar tr td a, #small.calendar tr td a, #big.calendar tr td a
{
text-decoration: none;
font-weight: bold;
display: block;

}

#maincolumn .calendar a:hover, #small.calendar a:hover, #big.calendar a:hover
{
color:#43600D;

}
#small.calendar td a, #big.calendar td a, #maincolumn .calendar td a {
color: #FF5500;
background:#fff;
}
#maincolumn .calendar .calendar-today,
#small .calendar-today,
#big .calendary-today,
#maincolumn .calendar .calendar-today a,
#small td.calendar-today a,
#maincolumn .calendar .calendar-today a:visited,
#maincolumn .calendar .calendar-today a:link,
#small td.calendar-today a:link,
#small td.calendar-today a:visited,
#maincolumn .calendar td.calendar-today a,
#maincolumn .calendar td.calendar-today a:link,
#maincolumn .calendar td.calendar-today a:visited,
#big td.calendar-today a,
#big td.calendar-today a:link,
#big td.calendar-today a:visited {
color: #fff !important;
font-weight: bold;
background: #FF5500 !important;
}

#small td.calendar-today a:hover, #big td.calendar-today a:hover {
color: #FF5500 !important;
background: #fff !important;
}

#maincolumn .calendar td.calendar-today a:hover,
#small td.calendar-today a:hover, #big td.calendar-today a:hover {
color: #fff !important;
background: #658F13 !important;
}
#maincolumn .calendar caption, #small caption, #big caption {
margin: 0 auto;
padding: 0 0 4px 0;
width: 100%;
background: #658F13;
color: #fff;
font: bold 11px/18px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
text-align: center;
}

#maincolumn .calendar caption, #big caption {
font: bold 18px/26px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
padding:0 0 3px 0;
}
/****** This hides the events inside the grid ******/
#maincolumn .calendar ul li, #maincolumn .calendar ul {display:none}

#maincolumn .calendar ul li, #maincolumn .calendar ul {font-size:9px;font-family:tahoma,verdana, arial, helvetica, sans-serif;}

#maincolumn .calendar caption a, #small caption a, #big caption a {
font: bold 18px/20px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
color: #fff;
text-align: center;
text-decoration: none;
}

#maincolumn .calendar caption a:hover,#small caption a:hover, #big caption a:hover {
background:transparent;
text-decoration: underline;
color:#fff !important;
}

#big caption a, #maincolumn .calendar caption a {
font: bold 30px/26px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
}

#maincolumn .calendar, table#small, table#big{
width: 100%;
padding: 0;
margin: 0 auto;
border: 1px solid #B1DF3E;
font: normal 11px/20px Arial, Helvetica, sans-serif;
color: #658F13;
text-align: center;
background-color: #E3FF9E;
border-collapse:collapse;
}
table#small, #small caption{
width: 148px;
}

table caption {
margin: 0px 0px 0px -1px;

}

#maincolumn .calendar, table#big {
width: 100%;
font: normal 14px/50px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
}

/* nice squares */
#maincolumn .calendar th, #small th, #big th
{
font: bold 11px/20px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
color: #43600D;
background: #9BC82B;
border-right: 1px solid #B1DF3E;
border-bottom: 1px solid #B1DF3E;
}
#maincolumn .calendar th, #big th
{
font: bold 14px/50px "Lucida Grande", LucidaGrande, "Lucida Sans",'Lucida Sans Unicode',
"Lucida Sans Unicode", 'Lucida Grande', Geneva, Arial, sans-serif;;
}
#maincolumn .calendar td, #small td, #big td {
border-right: 1px solid #B1DF3E;
border-bottom: 1px solid #B1DF3E;
height: 20px;
width:20px;
text-align: center;
}
#maincolumn .calendar td, #big td {
height: 50px;
width: 50px;

}

#small td a:hover, #small td a:active,
#big td a:hover, #big td a:active,
#maincolumn .calendar td a:active,
#maincolumn .calendar td a:hover {
color: #fff;
background: #9BC82B;

}

td.empty {background:#FFFF99}

div.calendar-list {line-height:normal;}

#calnavlist {margin:10px 0 20px 0;text-align:center;}

#rightcolumn .calendar-list h1 {font-size:12px; !important}
#rightcolumn .calendar-list h2 {font-size:11px; !important}

#rightcolumn .calendar-event {font-size:10px;}

#rightcolumn .calendar-returnlink
{font-size:9px;
text-align:right;
}

#rightcolumn span.calendar-prev, #rightcolumn span.calendar-next {display:none !important}

Posted: **Thu Mar 22, 2007 9:29 am**

Carasmo,

thanks for your reply. I know that I can style the container it is wrapped in, but the point is that with the use of detailpage, I can't pass the ID. In fact I have called "Calendar" in the sidebar, with id="small", this works and is styled. If I use the detailpage option, the detailpage is opened in the content-area and the requested information is shown there. I don't pass a id-parameter as it basically is a link from an event in the calendar.

So I don't know how to have the container on the detailpage parametered.

Ronny

Posted: **Thu Mar 22, 2007 12:16 pm**

If all you are showing is one event, you don't need any parameters. All the styling and appearance happens in the event template.

Posted: **Thu Mar 22, 2007 12:32 pm**

Heather,

My template "list-template" is:

Code: Select all

<div id="{$table_id}">
	{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>

In this template some "spans" are defined. These aren't styled because the DIV $table-id gets a strange value.

Ronny

Posted: **Thu Mar 22, 2007 1:40 pm**

Before I go pasting something here, I need to clarify something. I understand you have the small calendar showing in your sidebar. When there is a scheduled event showing as a link on the number in the small calendar, you want it to open up in the main content area as part of a list of events or upcoming events? Or do you want to show the single event? I ask because that would determine which template to use. Do you want one or both?

Posted: **Thu Mar 22, 2007 1:54 pm**

Heather,

the small calendar is shown in the sidebar. If a date with an event is clicked, the details for that event is opened in the {content}-area. The DIV that is shown in the source is something like "" and not the "cal-list" I would expect.

You can see at www.ruimzicht.eu where the small calendar is on the left, the 30th of this month is holding an event.

http://www.ruimzicht.eu/index.php?page=jaaroverzicht is the page that is not visible in the menu, but holds the "upcoming events" with the link to "read more", I used some of your styling with the Italic and Bold, but it doesn't show as they aren't getting the expected table_id. The page itself is styled, as it is called with {.... table_id=...}, the linking pages don't get the styling.

Ronny

Posted: **Thu Mar 22, 2007 3:11 pm**

Hello,

I can't understand what you need, it looks like your site is working fine. Maybe a screen shot or something would help.

Posted: **Thu Mar 22, 2007 3:17 pm**

I tried connecting and couldn't. I'll try again later. In the meantime, I also noticed something interesting. I wasn't including the detail page call in mine, but I have since changed it. So my sidebar calendar is called like this:

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

I found that it wouldn't work with the 1 or 0 unless I left out the quotes. The curious thing I am noticing is that for some reason, when I click on an event date in the small sidebar calendar, it opens the event detail page and uses the "list" template to display the event details, NOT the "event" template I expected to see! I just messed with it some more... Future events work fine from all templates; they display using the correct "event" template. The one past event uses the "list" for display. Go figure. But when it displays correctly, I notice that extra div giving the weird container id isn't there.

Posted: **Thu Mar 22, 2007 4:04 pm**

Heather,

I think it shows lists when clicking on the calendar. Events is shown when diving into "upcoming events".

Ronny

Posted: **Thu Mar 22, 2007 7:03 pm**

Hmmmmm.... $:-\$ I'm stumped. Without seriously diving into the Calendar code, I have no idea where that extra div is coming from! I do know that it isn't affecting the layout of the event detail, and the div with the correct table id is displaying first and applying the correct css for the id displayed.

I guess if it isn't affecting the display, don't worry about it. So, I ask, is it affecting the display of the event template? And I didn't go line by line on your css, but I'm assuming you have included in the Calendar stylesheet the css for the event template?

Posted: **Fri Mar 23, 2007 7:10 am**

Heather,

I get the idea to some point, the table_id is used to override the default, from the help:

Default is "calendar-".

If I call the module, I can give this parameter to the current page, as that is opened directly from the call of the module. By clicking through, the called page is opened, which doesn't hold a fixed or given table_id, so isn't stylable.

If I check the source of a called page, I see...

After clicking an event in the small calendar, it shows:

Off course this is not a given table_id and not styled.

I use:

Code: Select all

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

to call the small calendar in the sidebar, after clicking an event it opens "List Template", which isn't styled due to the strange table_id it gets. I fixed it now with changing the variable table_id to a fixed one, I styled.

Code: Select all

<!-- <div id="{$table_id}">  -->
<div id="cal-list">

The same goes for the upcoming-list.

I called that with:

Code: Select all

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

Again clicking the more link doesn't style, so I changed the called template, "Event template" to:

Code: Select all

<!-- <div id="{$table_id}">  -->
<div id="event">

So now both clicked items, get a fixed table_id and now are stylable.

Thanks for checking with me and guiding to the solution.

Ronny

Posted: **Fri Mar 23, 2007 12:12 pm**

Great solution when you know what template you want used! I'll have to try that as well. I did notice though that regardless of that extra div, the correct div that uses the "table_id" from the module call DOES display and uses the correct styling. You did get me to experiment with the calendar templates and module calls causing me to notice that there was a minor inconsistency that I suspect I can correct at some point by using your solution.

CMS Made Simple Forums

[SOLVED] How to style calendar list as "$table_id" is not passed

[SOLVED] How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: How to style calendar list as "$table_id" is not passed

Re: [SOLVED] How to style calendar list as "$table_id" is not passed