color coding you calendar events... (CGCalendar/Calendar1.0)

[owr_bgld]

Thanks - this helped lot for my lists. But now i have the problem, that i need it also for the Event-detail itself.

Is there also an easy way to get all categories? - I'm searching for hours yet  :-[

EDIT I:
My only Result getting the category-names is this (and I'm shure it's not the best)

Code: Select all

  {foreach from=$categories key=category item=item}
   {foreach from=$item key=categories1 item=item1}
    {foreach from=$item1 key=categories2 item=item2}
      {$item2}
    {/foreach}
   {/foreach}
  {/foreach}

EDIT II
I got lots of Ideas by searching the forum - but nothing worked for me

[Peciura]

Is there also an easy way to get all categories? - I'm searching for hours yet  Embarrassed

Where and how do you want to see categories ? If you post sketch to forum it would clarify a lot.

[owr_bgld]

Modul:  CGCalendar 1.2.5

Template: Event Template

Example: http://www.kavoe.at/calendar/67/1-Testveranstaltung

Need of Categories: To make for the Editor of the Events an easy way to insert two informations.
Therefore first  I made two categories (the Categories 'Intern' and 'Offen') to know if they are internal or open events.
I also have to know if there is an registration/ticket for the event necessary or not (the categories 'Anmeldung/Karten erforderlich' / '...nicht erforderlich')
The first advantage is, that the Editor only has to check (or left unchecked) the right categories. The next is that i for registered Users can show the internal Events in an extra Page (and others).

This kind of entry makes it the editor (an complete layman in this things) very easy to make the entries in the right way.

The part of the template with the categories:

Code: Select all

// First time check Categorys for internal or open events

  {foreach from=$categories key=category item=item}
   {foreach from=$item key=categories1 item=item1}
    {foreach from=$item1 key=categories2 item=item2}
      {if ($item2== 'Intern') or ($item2 == 'Offen')}
      <strong>Gültig für: </strong><img src="uploads/cgcalendar/{$item2}.jpg" alt=" {$item2}" width="8px; height="8px" /> {$item2}e Veranstaltung<br />
      {/if}
    {/foreach}
   {/foreach}
  {/foreach}

// second time check Categories to know if teckets needed or not

  {foreach from=$categories key=category item=item}
   {foreach from=$item key=categories1 item=item1}
    {foreach from=$item1 key=categories2 item=item2}
      {if $item2 == 'Anmeldung/Karten erforderlich'}
       <strong>Anmeldung/Karten: </strong>erforderlich
       {/if}
       {if $item2 == 'Anmeldung/Karten nicht erforderlich'}
       <strong>Anmeldung/Karten: </strong>nicht erforderlich
       {/if}
    {/foreach}
   {/foreach}
  {/foreach}

[pinpointdesign]

Hello, using Peciura's advice I got this far: http://yeledart.com/index.php?page=events
However, I have multiple events from different categories on one day, and I want the category CSS to apply to each event, rather than the whole day, and the same for the details popup. Can anyone point me to what I need to change to get there?
Here is my template:

Code: Select all

{strip}
<div id="main-cal">
   <table class="calendar" id="maincal-calendar">
      <caption class="calendar-month"><span class="calendar-prev"><a href="{$navigation.prev}"><img src="http://yeledart.com/uploads/yeledart/arrow_mini_left.png"> </a></span>        {$month_names[$month]} {$year}   <span class="calendar-next"><a href="{$navigation.next}"><img src="http://yeledart.com/uploads/yeledart/arrow_mini_right.png"></a></span></caption>
      <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 >
                        {$key}
                  <div class='cgcalendar_day' id='cgcalendar_day_{$key}'> 
                     {if isset($day.class)}
                        <div class="{$day.class}">
                     {/if}
                     {if isset($day.events.0)}               
                        {assign var='cgcalendar_multiple_category' value=''}
                        {assign var='first_category' value=''}
                        {foreach from=$day.events item=event}
                           {foreach from=$event.categories item=category}
                              <div class="cgcalendar_category_{$category.category_id} cgcalendar_category
                                 {if $first_category==''}
                                    {assign var='first_category' value=`$category.category_id`}
                                 {elseif $first_category!=$category.category_id}
                                    {assign var='cgcalendar_multiple_category' value=`$category.category_id`}
                                 {/if}               
                              "> 
                           {/foreach}
                         {/foreach} 
               
                        {if !empty($cgcalendar_multiple_category)}
                           <div class='cgcalendar_multiple_category'>
                        {/if}
                        
                        
                        {if !empty($cgcalendar_multiple_category)}
                           </div>
                        {/if}
                        
                      {foreach from=$day.events item=event}
<div class="calendar-cat-{foreach from=$event.categories key=category item=item}{$item.category_name}{/foreach}">
<li><a href="{$event.url}">{$event.event_title}</a></li></div>
{/foreach}
                        
                        <div class='cgcalendar_info'>
                           <ul style='float:left;'>
                              {foreach from=$day.events item=event}
                                 <li>
                                    <a href="{$event.url}">
                                       {$event.event_title}
                                    </a>
                                 </li>
                              {/foreach}
                           </ul>
                        </div>
                     </div> 
                     {else}
                     {/if}
                  
                     {if isset($day.class)}
                        </div>
                     {/if}         
                  </div> 
               </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>
</div>
{/strip}

And here is my CSS:

Code: Select all

/* CGCalendar*/

/*
Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar'}

*/
#main-cal {
font-size:11px;
}
.cal-upcominglist h2 {
color:red;
}
.calendar-month {
background-color:#ddf3ff;
padding:3px;
color: #23688d;
text-transform:uppercase;
font-weight:bold;
font-size:13px;
}
.calendar-prev {
width:16px;
height:16px;
}

.calendar-prev a {
text-decoration:none;
}

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

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

/* display the "upcominglist" as one line per entry (assuming default class and id names) */
#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:#5ba8d2;
  font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
  font-size: 110%;
}

/** large calendar rules (assuming default class and id names) **/
/* border on for #cal-calendar */
#maincal-calendar{
  margin: 0px;
  border-collapse:    collapse;
  border: 3px solid #a3d7f4;
}

/* nice squares for the #cal-calendar table */
#maincal-calendar th
{
  border: 2px solid #a3d7f4;
  padding: 2px;
  background-color: #5ba8d2;
  color: white;
font-weight:bold;


}

#maincal-calendar td {
  border: 2px solid #a3d7f4;
  vertical-align: top;
  padding: 2px;
  height: 64px;
width:64px;
}

/* format summaries nicely in #cal-calendar */
#maincal-calendar ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
}

#maincal-calendar li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

/* background colours for #cal-calendar 
#maincal-calendar td
{
  background-color: #ddf3ff;
}*/

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

#maincal-calendar .calendar-today
{
  font-weight: normal;
  background-color: #ddf3ff;
}

.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
  display: none;
}
div.cgcalendar_day{
   position: relative;
   text-align:left;
}
.cgcalendar_category, .cgcalendar_day, .cgcalendar_multiple_category {
  /* width:21px;
   min-width:21px;
   height:21px;
   min-height:21px;
*/}

div.cgcalendar_day div.cgcalendar_info{
   display:none;
   z-index:2;
   position: absolute;
   bottom:1.3em;
   left:0px;
   background-color:#ffffff;
   border: solid 1px #CEDE95;
}
#cal-calendar div.cgcalendar_info ul{
   padding:0px;
   margin:  1em 2em;
   text-align:left;
}
div.cgcalendar_day:hover div.cgcalendar_info, div.cgcalendar_day div.cgcalendar_info :hover{
   display:block;
}

/*.cgcalendar_multiple_category{
   background-color:#ECEBE6;
}*/


.cgcalendar_category_1, .cgcalendar_category_2, .cgcalendar_category_3, .cgcalendar_category_4{
   background-image:url('images/cgcalendar_category.png');
   background-repeat:no-repeat;
   background-color:transparent;
}
.cgcalendar_category_1{
   background-position:-11px -11px;
border: black solid 1px;
}
.cgcalendar_category_2{
   background-position:11px -11px;
border: red solid 1px;
  color: red;

} 
.cgcalendar_category_3{
   background-position:-11px 11px;
border: black solid 1px;
color:black;

} 
.cgcalendar_category_4{
   background-position:11px 11px;
border: green solid 1px;
color:green;
}

table#cal-calendar .calendar-today{
   border:1px solid #ff0000;
   z-index:1;
   text-align:center;
}

Thank you!

[Peciura]

I can not find "li.event-details" on template you posted, it means your big calendar is using other template.