Calendar List layout (SOLVED)

[johnl]

Hi Guys,

I am new here, great CMS you have all created. May I seek some advice please.

Have have a calendar displayed using display="upcominglist"
However the events shown are all  squashed together

How can I space them out with say 1cm gap between each event?

Please view picture to see what I mean


Thanks in advance

[gelöscht durch Administrator]

[johnl]

My news module displays great just like I wish calendar list to display

How do I make my calendar list layout nice and spaced like this?


Thanks

[gelöscht durch Administrator]

[RonnyK]

John,

you could check the elements being used by News in the CSS and use the same logic for the styling of the Calendar CSS.

Ronny

P.S. I put two test-entries on www.ruimzicht.eu "jaaroverzicht". I can send you the way that I styled that.

[mox]

for a quickly reference to create the right css, see in Content -> Calendar -> List Template



{if $day > 0}{$day} {/if}{$month_names[$month]} {$year}

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

You can see the class used by the template and can customize with an appropiate css;
also, you can add inside the template some tag like or etc

byz
MoX

[johnl]

No, getting nowwhere

I can change the stylesheet for the news to alter the effect, but whatever I try to the calendar stylesheet has no effect

[johnl]

John,

you could check the elements being used by News in the CSS and use the same logic for the styling of the Calendar CSS.

Ronny

P.S. I put two test-entries on www.ruimzicht.eu "jaaroverzicht". I can send you the way that I styled that.

Thanks, yes that would be a great start, I like the way you have the two events showing

[johnl]

for a quickly reference to create the right css, see in Content -> Calendar -> List Template



{if $day > 0}{$day} {/if}{$month_names[$month]} {$year}

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

You can see the class used by the template and can customize with an appropiate css;
also, you can add inside the template some tag like or etc

byz
MoX

Sorry, I dont know about CSS or how to attempt this

[RonnyK]

Find below my settings for the calendar / list / upcoming and events:

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>

and the CSS used:

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

[johnl]

[quote="RonnyK"]
Find below my settings for the calendar / list / upcoming and events:


Thanks Ronnie

I am a bit of a newb when it comes to this, is this correct:

I copy the code for the CSS and create a new CSS by pasting all the CSS code into it?

To create my list, I copy the code from your list template into a new template? were does the code go?

I then associate the CSS with the new template?

I then create new page and associate new template with new page?
and paste {cms_module module='Calendar' table_id='cal-list'} into new page?


Sorry if this is all completly stupid and wrong, I feel like a idiot

[RonnyK]

John,

calendar already has a default stylesheet, you can attach that one "calendar CSS example" by clicking the "CSS"-button on the line of your template in "Layout -> templates" to see how the default acts. I normally copy the stylesheet to a new one, in my case "rk: calendar" and attach that one using the same button, first I delete the association with the original stylesheet and than attach the copied one. In that one I make all the changes, like the ones I showed. With the CSS-button on the template, you can see all attached stylesheets, most modules have their own default CSS, that you need to attach manually after installing the module.

Ronny

[johnl]

John,

calendar already has a default stylesheet, you can attach that one "calendar CSS example" by clicking the "CSS"-button on the line of your template in "Layout -> templates" to see how the default acts. I normally copy the stylesheet to a new one, in my case "rk: calendar" and attach that one using the same button, first I delete the association with the original stylesheet and than attach the copied one. In that one I make all the changes, like the ones I showed. With the CSS-button on the template, you can see all attached stylesheets, most modules have their own default CSS, that you need to attach manually after installing the module.

Ronny

Thanks, when I go to create a  list template using your code, were do I insert the code?

[RonnyK]

John,

the templates for the calendar are to be edited under "Content -> Calendar", the four templates I use are the ones I put in an earlier reply. If you create a new stylesheet as well, you can copy my CSS in as well, under "Layout -> Stylesheets", give it a name and attach it to your template, using "Layout -> Templates -> Attached stylesheets (CSS-button)".

Ronny

[johnl]

John,

the templates for the calendar are to be edited under "Content -> Calendar", the four templates I use are the ones I put in an earlier reply. If you create a new stylesheet as well, you can copy my CSS in as well, under "Layout -> Stylesheets", give it a name and attach it to your template, using "Layout -> Templates -> Attached stylesheets (CSS-button)".

Ronny

Sorted

Thanks for the help, go it working after a lot of effort, could not have done it without you.

Big Thanks