Could you add functionality to enable classes to be added to the events (http://arshaw.com/fullcalendar/docs/event_rendering/Colors/)?

I guess the most generic way of doing this is by node type added as filters to the view, although I'd like it to be based on a cck field value. Is this possible?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ablondeau’s picture

I have added code to set the class name based on the node type.

Leaving ticket open as a cck field based class is a good idea too...

DMacpherson’s picture

The class definitions can also be added by editing the template files. I've even managed to edit them to base the event class off the taxonomy, but with a little coding magic you could use anything associated with the node as a class.

EDIT: Here my code...

views-view-node-fullcalendar.tpl.php

<div class="fullcalendar_event">
  <a class="fullcalendar_event_details" href="<?php echo $url; ?>" title="<?php echo $title; ?>" start="<?php echo $start; ?>" end="<?php echo $end; ?>" cat="<?php foreach ($node->taxonomy as $taxonomy) { echo 'fullCalendar-'.$taxonomy->name.' ';} ?>"></a>
</div>

This adds an attribute called "cat" which will hold our categories for when fullCalendar processes these links. Plus, it adds "fullCalendar-" to the beginning of each attribute to seperate them from other classes that happen to have the same name.

Then for the views-view-fullcalendar.tpl.php file, I just add the following line to events.push

className: $(event_details).attr('cat'),

Which results as:

events.push({
  title: $(event_details).attr('title'),
  start: $(event_details).attr('start'),
  end: $(event_details).attr('end'),
  url: $(event_details).attr('href'),
  allDay: false,
  className: $(event_details).attr('cat'),
});

This processes the taxonomy terms in the cat attribute. For example, if you classify a node as "Apple" and "Banana", it adds "fullCalendar-Apple" and "fullCalendar-Banana" to your classes. Then you can style them via CSS.

Theorhetically, you could do this with any field, even CCK. It's just a matter of hunting down the right variable via the Devel Module.

bjalford’s picture

How could this be implemented with views?

DMacpherson’s picture

Well, it's pretty much already implemented with views. You just have to code the templates for the FullCalendar view.

As far as having actual options integrated in the views module: Not sure. Views development was never my forte.

I'd imagine when you choose the View type, there'd be an option to choose which field would represent additional classes. The only problem is this module doesn't utilize fields in it's views, which means the list of available fields would be immense. It would be great if you could choose which fields to display in the view and then select one of them for an additional class, like how many of the JQuery slideshow views do for picking which fields hold the images.

geerlingguy’s picture

FileSize
269.88 KB

The Calendar module has a special setting for calendar event color display using a special taxonomy for events. See the attached screenshot for an example of the colors as added by the calendar module.

It would be awesome if a user could pick the colors based on a taxonomy (I have an 'event type' taxonomy with things like 'General, Meetings, Parties, etc.') in the Views interface... however, if that's not possible (or if it's too much work), perhaps documentation on how to easily add the classes required would be a good alternative.

... However, I'd rather not have to theme the calendar on every site on which I install FullCalendar—this is a major win for the Calendar module, imo, and one reason I'm going to stick with it for now on some of my sites.

geerlingguy’s picture

Title: Add support for event class » Add support for event class / assigning colors to events

Updating title, to better reflect what I think this issue is suggesting.

Edgar Saumell’s picture

Subscribing.

Grayside’s picture

The Crayon module is a helper module specifically intended for this sort of thing.

tim.plunkett’s picture

Status: Active » Needs review
FileSize
2.19 KB

I agree that there should be support for color assignment from within the GUI. However, in the meantime it's still hard to specify colors from CSS, and there is no extensible way to add more classes.

This patch adds a call to theme_fullcalendar_classname($node), which in effect returns fc-event-default $node->type. I added the new fc-event-default class to the default styling in fullcalendar.css, so that if a theme implements theme_fullcalendar_classname, it doesn't have to go to extra lengths to override that CSS.

With this API addition, there is no change for a current user of the module.

I'd like to see this committed (after review, of course), and then we can reopen this for adding color-adding to the GUI.

tim.plunkett’s picture

Status: Needs review » Fixed
videographics’s picture

I just want to point out that another common use case would be to need different classes for nodes posted to different Organic Groups. This is basically what the crayon module does for the calendar module. Unfortunately, calendar is stuck using a single CCK field for the entire calendar.

It would be nice to maybe see a list of checkboxes offering to setup classes for the fullcalendar display of different node types, organic groups, taxonomy and anything else that might make sense.

I like what's being talked about with a non-CSS interface for choosing colors. Interface-wise, I think it would be nice to be able to go to a Node Type or to a Group Page or a Taxonomy Term and choose a color to associate for the calendar display of those items. I think end users would really value this capability.

BTW, kudos for everyone putting in such great work on this.

geerlingguy’s picture

Could someone perhaps ping back with how to use this to change colors for events? It's not quite obvious for me—can colors be changed on a per-taxonomy-term basis, a per-node-type basis, or what?

geerlingguy’s picture

Nevermind... for those who, like me, wish to add a class for each event's term id, here's something to get you started (put this code into template.php, and change themenamehere to your theme's short name):

/**
 * Implementation of theme_fullcalendar_classname().
 *
 * @param $node
 *   An object representing the node.
 *
 * @return
 *   A string suitable for use as a CSS class.
 */
function intranet_fullcalendar_classname($node) {
  $className = array(
    'fc-event-default',
    $node->type,
  );
  // Taxonomy Term IDs for coloring
  foreach ($node->taxonomy as $term_id) {
    $className[] = 'fc-event-tid-' . $term_id->tid;
  }
  return implode(' ', $className);
}

[Edit: Updated code from timplunkett above. This will work for as many Taxonomy terms as you'd like.]

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.