Calendar help part 2

[duplay]

I managed to get the calendarr to show- but now i get a messed up format. Any idea how to fix this?

[attachment deleted by admin]

[Greg]

First you need to create a calendar page with a tag such as
{cms_module module="Calendar" table_id="cmscal" first_day_of_week="0"}
Note the table_id, you will need this id to style the calendar with CSS.
Create a stylesheet called Calendar with the following code:

Code: Select all

#cmscal {
  width: 98%;
  border: 4px double #385C72;
  margin: auto
}
#cmscal .calendar-prev {
  font-size: 1.6em;
}
#cmscal .calendar-month {
  font-weight: bold;
}
#cmscal .calendar-next {
  font-size: 1.6em;
}
#cmscal td {
  width: 14%;
  border: 1px solid #ddd;
  margin: 0;
  padding: 4px;
  background-color: #ececec;
}
#cmscal .calendar-today{color: red; font-weight:bold;}
#cmscal th {
  border-bottom: 2px double #999;
  color: #385C72;
}
#cmscal tr {
  vertical-align: top;
}
#cmscal ul {
  margin: 0;
  padding: 0;
  list-style: none
}
#cmscal li {  border-bottom: 1px dotted #bbb;}
#cmscal a, #cmscal a:link, #cmscal a:visited {
  font-size: .8em;
  color: blue;
  text-decoration: none;
}

.calendar-date-from {font-size: 120%; font-weight: bold; padding: 5px 0; color: #007700;}
.calendar-summary{padding: 0 0 5px 0; color: #bb0000;}

Then associate the calendar css file with the template you used when you created the calendar page.

Change the colors in the css file to your liking.

[duplay]

Greg,

What did you mean by : Then associate the calendar css file with the template?
I followed your directiosn to that point but need some help. also,this is what my calendar looks like:


do you have any screen shots of what it should look like?

thanks

mjd

[attachment deleted by admin]

[jeffunk]

Hi,

Here's a picture of what my calendar looks like, just for reference. 

What Greg means by
"associate the calendar css file with the template"

is that you need to tell cmsms to use the new css file that you just created.  To do this:
1. login to the admin utility
2. Go to Layout --> Stylesheets
3. Click add new stylesheet call it "calendar"
4. Paste in Gregs work
5. Then go to Layout --> Templates
6. Find the template that you are using for the sheet with the calendar on it
7. Click the CSS button on the right
8. Find your new stylesheet
9. Click the Add button and go and have a look at the calendar page, you should notice some changes!

Good luck, Jeff

[attachment deleted by admin]

[mrk]

Thanks I needed this!

[katon]

Thanks I needed this!

hmm... I thought this was in module's help page.  Maybe in less detail though.

[duplay]

This what mine looks like. How can I get the days in the upper left corner? and to get the day boxes not to stretch wehn a even is in?

[attachment deleted by admin]

[duplay]

Can you post what your stylesheet look like? thanks!

[katon]

How can I get the days in the upper left corner? and to get the day boxes not to stretch wehn a even is in?

Reduce padding, it must help.

[jeffunk]

I just used the sample CSS that is written into the help of the Calendar module (0.7 alpha2)

For reference here it is

here's teh smarty tag I used

Code: Select all

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

And here's the CSS

Code: Select all

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

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

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

[prefab]

In version 0.7 the 'Calendar template' allows defining style only to the current-day and the other days, as yopu can see from the above examples. It is possible to add styles for "empty-days","events-day","weekend-day", as in the attached picture. Modify the 'Calendar template' as follows:

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}" class="calendar-empty"> </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}

{* current day *}
{if $day.class}
<td class="{$day.class}">

{* events *}
{elseif $day.events.0}
<td class="calendar-events">

{* weekend *}
{elseif $weekday == 5 or $weekday == 6}
<td class="calendar-weekend">

{* weekday *}
{else}
<td class="calendar-day">
{/if}

{if $day.events.0}<a href="{$day.url}">{$key}</a>
{if $summaries == true}
<ul>
{foreach from=$day.events item=event}
<li><a href="{$event.url}">{$event.event_title}</a></li>
{/foreach}
</ul>
{/if}
{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}" class="calendar-empty"> </td>
{/if}


</tr>
</tbody></table>

{/strip}

This is an example CSS:

Code: Select all

/* make all links red */
.calendar tr td a
{
color: white
}

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

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

#big .calendar-link
{
float: left;
}

/* 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 th
{
color: white;
background-color: #475675;
}

#big .calendar-empty
{
background-color: LightGray;
}

#big .calendar-today
{
font-weight: normal;
color: white;
background-color: #FF7F47;
}

#big .calendar-events
{
background-color: #D44026;
}

#big .calendar-weekend
{
background-color: #BFEFFF;
}

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

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

.calendar-upcominglist
{
margin-bottom: 25px;
}
.calendar-event .calendar-summary
{
margin-bottom: 10px;
}

cheers
prefab

[attachment deleted by admin]

[amygdela]

Hmm, Thanks for this. Usefull. But now i'm having problems with the prettylinks and this calendar.

http://www.marenomichels.nl/agenda.html

If you browse through the months, in the URL 'index.php' appears, but that is incorrect. What do i need to do to fix this?

[prefab]

But now i'm having problems with the prettylinks and this calendar.

Hi amygdela,

calendar does not work with Pretty URLs. More info here
http://forum.cmsmadesimple.org/index.ph ... 872.0.html

cheers

[jindravavruska]

Jeff, thanks from me too. The documentation of the Calendar module is absolutely insufficient. The module project has no home page, no explanation how it works, etc. BTW, adding events to a calendar is usually not a task for the admin, but for the user. I don't think there are too many people out there who would call their admin to edit calendar each time they want to make an appointment...

Actually, installation of Calendar, and few other things, make me wonder why this messy system is called "Made Simple". I used to work with Oracle Portal. It was definitely not simple, but all attributes where described and accessible, all language translations could be done in a simple and systematic way, not like editing a PHP file. The same was true for CSS styling and so on. CMS-MS is a bunch of templates without too much structure, many parts of the templates repeat in many different places.

Regards, Jindra

Hi,

Here's a picture of what my calendar looks like, just for reference. 

What Greg means by
"associate the calendar css file with the template"

is that you need to tell cmsms to use the new css file that you just created.  To do this:
1. login to the admin utility
2. Go to Layout --> Stylesheets
3. Click add new stylesheet call it "calendar"
4. Paste in Gregs work
5. Then go to Layout --> Templates
6. Find the template that you are using for the sheet with the calendar on it
7. Click the CSS button on the right
8. Find your new stylesheet
9. Click the Add button and go and have a look at the calendar page, you should notice some changes!

Good luck, Jeff