Kalender: Templates en Styling

[RonnyK]

Na een aantal PM's zal ik de kalender zoals ik die heb gestyled op www.ruimzicht.eu hier weergeven.

Ten eerste de aanroep in de algemene template, waarbij de details zullen worden getoond in de pagina genaamd 'kalender', deze pagina moet aktief zijn, hij hoeft echter niet getoond te worden in het menu:

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

Ik heb de kalender in een DIV geplaatst, zodat er een kader om gezet kan worden en de titel in de kop gezet kan worden.

Vervolgens de templates zoals die in de kalender staan.

Calendar template:

{strip}

{if $compact_view neq 1}
« {$month_names[$month]} {$year} »
{/if}

{foreach from=$day_names item=day key=key}
{$day_short_names[$key]}
{/foreach}


{* initial empty days *}
{if $first_of_month_weekday_number > 0}
 
{/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}


{/if}

{if isset($day.events.0)}{$key}
{* RK deleted
{if $summaries == true}

{foreach from=$day.events item=event}
{$event.event_title}
{/foreach}

{/if}
RK end deleted *}
{else}{$key}{/if}

{math assign=weekday equation="x + 1" x=$weekday}
{/foreach}

{* remaining empty days *}
{if $weekday != 7}
 
{/if}





{/strip}

List-template:

{foreach from=$events key=key item=event}
{$event.event_title}
{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 == ""}


{$lang.date}:

{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}


{else}
{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}


{$lang.date}:

{$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"}


{else}


{$lang.date}:

{$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"}


{/if}
{/if}
{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "
"))}


{$lang.summary}:

{$event.event_summary}

{/if}
{if $detail == 1}
{if $event.event_details !="" && $event.event_details != "
"}


{$lang.details}:
{$event.event_details}

{/if}
{else}
{$moretext}
{/if}
{/foreach}
{if $return_url != ""}

{$return_url}

{/if}

Upcoming template:

{if $compact_view neq 1}

{/if}
{foreach from=$events key=key item=event}

{$event.event_title}
{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 == ""}


{$lang.date}:

{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]}  {$event.event_date_start|date_format:"%Y"}


{else}
{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}


{$lang.date}:

{$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"}


{else}


{$lang.date}:

{$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"}


{/if}
{/if}
{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "
"))}


{$lang.summary}:


{$event.event_summary}


{/if}
{if $detail == 1}
{if $event.event_details !="" && $event.event_details != "
"}


{$lang.details}:

{$event.event_details}


{/if}
{else}
{$moretext}




{/if}


{/foreach}
{if $return_url != ""}

{$return_url}

{/if}

Event template:

{$event.event_title}
{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 == ""}


{$lang.date}:

{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}


{else}
{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}


{$lang.date}:

{$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"}


{else}


{$lang.date}:

{$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"}


{/if}
{/if}
{if $event.event_summary !="" && $event.event_details ==""}


{$lang.summary}:


{$event.event_summary}


{/if}
{if $event.event_details !="" && $event.event_details != "
"}


{$lang.details}:


{eval var=$event.event_details}


{/if}

{$return_url}

Vervolgens de stylesheet:

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

[wmaster]

Hoi RonnyK,

Het leek allemaal goed te gaan met mijn kalender, maar toen het 1 november werd gingen alle kleuren op rood en krijg ik halve en grote kalenders in mijn "content" als ik op een datum klik !?

Wat moet of kan ik hier aan doen?

http://www.pacelli.nl/index.php

Graag je hulp in deze.

wmaster 

[RonnyK]

Heb je misschien een screenshot van wat je bedoelt. Ik kijk met IE7 en zie niets raars.

Ronny

[RonnyK]

wmaster,

of bedoel je soms wanneer je op de detailpagina op de terug-link drukt, dat je dan op het content-gedeelte een Engels-talige kalender over de breedte van de content-area krijgt.

Dat zou je kunnen aanpassen door de return-link te verwijderen uit de template.

Ronny

[wmaster]

RonnyK,

ja dat bedoel ik. Het aanpassen van de rode kleur naar zwart had ik intussen al gevonden.

Kan ik hem ook gewoon terug laten linken naar de startpagina?

wmaster

wmaster,

of bedoel je soms wanneer je op de detailpagina op de terug-link drukt, dat je dan op het content-gedeelte een Engels-talige kalender over de breedte van de content-area krijgt.

Dat zou je kunnen aanpassen door de return-link te verwijderen uit de template.

Ronny