Wie kan een beginnenling helpen met Calendar?

[sebas]

Ik heb de Calendar 0.7.8 module geinstalleerd!
Ik gebruik momenteel alleen de 'upcominglist'
Ik ben niet zo thuis in CSS en PHP, hoe kan ik dit gemakkelijk aanpassen?
Ik kan nergens in m'n CMS een standaard CSS vinden die gekoppeld is aan Calendar waar ik mee kan expirimenteren.
Wie kan mij vertellen hoe ik een mooie CSS maak en hoe ik die koppel aan een template?

Verder ben ik op zoek naar een manier om een knop te maken om de gebruiker te laten switchen tussen de Categorieen.


Alvast bedankt

Groet,

Sebastiaan

[cyberman]

Hi Sebastiaan,

welcome at this english spoken forum - would be nice if you could use this language.

But I think I can understand your problem - normally calendar installs his own stylesheet. Please make a look at menu Layout > Stylesheets in admin panel.

Some skills in CSS are really useful to get good results.

[sebas]

Hi Cyberman,

sorry for the language
i saw dutch people on the Forum

But the problem is that Calendar didn't install a CSS stylesheet
I think it uses an internal template somehow

I want to change the look of the standard template (http://www.pkn-zwammerdam.nl/index.php?page=agenda)
change colors and others to make the calendar look better

i wanted to add a small calander at the home page, but the standard is ugly
i've looked at the forum for help but my english is poor even so is my knowledge of PHP and CSS

[cyberman]

But the problem is that Calendar didn't install a CSS stylesheet
I think it uses an internal template somehow

The following should be installed from modules install wizard

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

Yes I know - it's for a big solution. But inside folder /jscalendar you can found a lot more stylesheets.

[sebas]

I've created a new stylesheet called big
and added table_id='big' tot the code at my page
but nothing happens
did i miss something
do i have to change even more??

[Michael AC]

Hi sebas,

the point is not a stylesheet called "big" but a respective style with this name within a stylesheet.

Look to the stylesheet cyberman posted: Somewhere in the middle you'll find a style called "#big". This is the one you need!

Table_ID="big" means, that the calendar table gets the ID "big":

Code: Select all

<table id="big"><tr><td>...</td></tr></table>

Now you can refer to the calendar table with

Code: Select all

#big table
  {
   ...some styles...
  }

#big tr
  {
   ...some table row styles...
  }

#big td
  {
   ...some table column styles...
  }

#big etc...
  {
   ...some calendar styles...
  }

Kind regards from Aachen, Germany
Michael

[sebas]

i'm using only upcominglist of calendar 0.7.8
i don't understand where to change the look of the upcominglist
i know i have to change the css somewhere

i only know that i have a code on the page

Code: Select all

<div align="right"><i><font size="1">{cms_selflink page='66' text='Klik hier voor alleen de agenda van de Hervormde Gemeente'}</font></i></div><div align="right"> </div>
 <h1>Gezamenlijke agenda</h1><br />
<p>{cms_module module='Calendar' display='upcominglist' lang='nl_NL' table_id='big'}</p>

and a code on the upcominglist template

Code: Select all

<div class="calendar-upcominglist" id="{$table_id}">
{if $compact_view neq 1}
<!-- <h1>{$lang.upcoming_events}</h1><br /> -->
<!-- <h1>Gezamenlijke agenda</h1><br><br> -->
{/if}
{foreach from=$events key=key item=event}
	<div class="calendar-event">
	<h2>{$event.event_title}</h2><br />


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

	</div><br />
{/foreach}

{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
</div><br />

where do i have to put the reference to a .css?

[Michael AC]

Hi sebas,

ok, this code

Code: Select all

<div align="right"><i><font size="1">{cms_selflink page='66' text='Klik hier voor alleen de agenda van de Hervormde Gemeente'}</font></i></div><div align="right"> </div>
 <h1>Gezamenlijke agenda</h1><br />
<p>{cms_module module='Calendar' display='upcominglist' lang='nl_NL' table_id='big'}</p>

is somewhere in your template.

Within the CMS back-end you can choose which stylesheet(s) you want to use for your template.

On the template overview you can see on the right side some kind of CSS logo. Click on it, and you can choose one or more stylesheets to be used with this template.

If you need a special stylesheet just make your own and connect it to your template this way. Or as it is said within the calendar help there are some stylesheets delivered with the calendar module. Choose these and change the respective IDs.

Best regards from Germany
Michael