Author Topic: exposing event type to a Drupal View/ Color coding the calendar (Read 5188 times)

SarahG (FountainTribe) · July 12, 2012, 04:34:34 pm

I am trying to plan the best approach for having different background colors for different event types on the event calendar. The calendar is displayed in by using a Drupal View of type CiviEvent. I

I would like to add CSS rules that give each event type its own color, so that any event of type "aaa" gets a different color background than events of type "bbb"

What I am thinking of doing: Customize the code at <site root>/sites/all/modules/civicrm/drupal/modules/views/civicrm/* so that the Drupal view will include a div tag with a special style sheet rule for each event type. ( such as <div class="event_type_1">The Spring Gala Dinner</div> <div class="event_type_2">The Board meeting</div> )

Am I on the right track?

Hershel · July 14, 2012, 02:10:15 pm

Quote

Am I on the right track?

No. You should customize your View's templates to achieve that. You shouldn't edit the module code.

I have done precisely what you are suggesting, by the way.

SarahG (FountainTribe) · July 15, 2012, 12:42:39 am

Good idea, thanks for the suggestion.

SarahG (FountainTribe) · July 15, 2012, 01:30:27 am

In the custom Views template file, how did you access the event type of each event?

Hershel · July 15, 2012, 04:21:04 am

You will need to use the public API for that. Use the PHP API to fetch the event type.

gsaha · December 20, 2012, 07:27:22 pm

Hi Sarah and Hershel,
This is exactly what I want to do. I have exposed the event type field in Drupal calendar.
Unfortunately I am not a developer.
Would be grateful for any help to achieve this. I have no idea how to write PHP code but given some help I can hack.
Here is what I have so far
http://www.gautamsaha.com/testdrupal/events

Hershel · December 21, 2012, 05:52:43 am

Quote from: gsaha on December 20, 2012, 07:27:22 pm

I have exposed the event type field in Drupal calendar.

You won't actually need to use the CiviCRM API in that case. What you must do is open the Advanced section of the View Edit page and click on Theming. Then you see a list of templates. You will have to create a custom template. Here is one page about how to do that http://drupal.org/node/128741

Then in your custom template, you print out a class for each table cell based on the event type. Here is a line from a Drupal 6 template:

Code: [Select]

<div class="view-item view-item-<?php print $view->name.'_'.$type ?>">

where $type you must define from $row or $fields, depending on which template you have.

gsaha · December 21, 2012, 07:12:19 am

Hershel..thank you thank you. No wonder people all over the world speak so highly about this forum and community.
I have found the theme area on the civicrm view event page with a list of tlp files. I am assuming these are the template files.
I really get the path to do this now with your kind help, but I need help to connect the dots.
What specific code do I put when I create this new tempate? Do I create this new template file with notepad and then rename it any way I want? Once created which directory do I upload this file and how to activate this new template?
I have my calendar listed to view my month and view only monday-friday.
Not sure what to specifically add to the div class code...
I can see the light at the end of the tunnel with your help.
If there is a way to PM you , I would like to make a donation for your help.

Hershel · December 22, 2012, 03:10:35 pm

If this is a Drupal 6 site, then try making a file

calendar-month-node.tpl.php

and put that in your theme folder. If your site uses Garland, so put it there (themes/garland) and then the first line of that file's code should look like what I posted above. I would need FTP access to your site to tell exactly how to define $type.

gsaha · December 23, 2012, 03:20:56 pm

thanks hershel.
yes indeed drupal 6 using garland theme.
please check your PM.
Sent you admin access to site and ftp access.
thanks again

Hershel · December 24, 2012, 08:10:22 am

I put a file called calendar-month-node.tpl.php in your theme folder with this line:

Code: [Select]

<div class="view-item view-item-<?php print $view->name ?> <?php print $fields['civicrm_event_event_type_id']['data'] ?>">

and that prints the event type as a class for the DIV of each event. Now you can style those as you want with CSS.

To make a donation to the CiviCRM project, you can visit here http://civicrm.org/contribute

Thank you.

gsaha · December 24, 2012, 09:24:33 am

dear Hershel,
thank you.
yes I see the file in the garland theme folder with that line.

Pardon my lack of knowledge...which CSS do I edit now?
style.css in the garland theme?
If so can you give me an example of a syntax for one type of event color code.
For example in http://www.gautamsaha.com/testdrupal/events I have two "conference" tyoe events for december. If I want to show all conference type events with a color of #4300ff what is the syntax?
Thank you again for your kindness. I am going to donate asap.
Looking forward to your help for the final piece of this.
thanks again

Hershel · December 24, 2012, 10:24:25 am

Your questions now are purely Drupal theming issues. I am not able to develop your site for you. You need to edit the style sheet for your theme, yes. For the details of what to do, I suggest you either learn CSS or consider hiring a professional. I can give you a simple answer, but it may not work. Try:

Code: [Select]

div.Conference {background: #4300ff;}

kreynen · April 26, 2013, 02:11:16 pm

For D7, you can use http://drupal.org/project/civicrm_multiday_event. See it in action at http://suffolkcountydems.com/civicrm-multiday-event/calendar2

CiviCRM Community Forums (archive)

News:

Author Topic: exposing event type to a Drupal View/ Color coding the calendar (Read 5188 times)

SarahG (FountainTribe)

exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

SarahG (FountainTribe)

Re: exposing event type to a Drupal View/ Color coding the calendar

SarahG (FountainTribe)

Re: exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

gsaha

Re: exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

gsaha

Re: exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

gsaha

Re: exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

gsaha

Re: exposing event type to a Drupal View/ Color coding the calendar

Hershel

Re: exposing event type to a Drupal View/ Color coding the calendar

kreynen

Re: exposing event type to a Drupal View/ Color coding the calendar