View: 3.8: Color according to calendar and category (similar to Kontact)

plugins/calendar/calendar.php

@@ -57,6 +57,7 @@ class calendar extends rcube_plugin
     'calendar_work_start'   => 6,
     'calendar_work_end'     => 18,
     'calendar_agenda_range' => 60,
+    'calendar_event_coloring' => 0,
   );
 
   private $default_categories = array(
@@ -308,7 +309,7 @@ class calendar extends rcube_plugin
         'content' => $select->show($this->rc->config->get('calendar_first_day', $this->defaults['calendar_first_day'])),
       );
       
-      $time_format = self::to_php_date_format($this->rc->config->get('calendar_time_format'));
+      $time_format = self::to_php_date_format($this->rc->config->get('calendar_time_format', $this->defaults['calendar_time_format']));
       $select_hours = new html_select();
       for ($h = 0; $h < 24; $h++)
         $select_hours->add(date($time_format, mktime($h, 0, 0)), $h);
@@ -326,6 +327,18 @@ class calendar extends rcube_plugin
         ' &mdash; ' . $select_hours->show($this->rc->config->get('calendar_work_end', $this->defaults['calendar_work_end']), array('name' => '_work_end', 'id' => $field_id)),
       );
 
+      $field_id = 'rcmfd_coloing';
+      $select_colors = new html_select(array('name' => '_event_coloring', 'id' => $field_id));
+      $select_colors->add($this->gettext('coloringmode0'), 0);
+      $select_colors->add($this->gettext('coloringmode1'), 1);
+      $select_colors->add($this->gettext('coloringmode2'), 2);
+      $select_colors->add($this->gettext('coloringmode3'), 3);
+
+      $p['blocks']['view']['options']['eventcolors'] = array(
+        'title' => html::label($field_id . 'value', Q($this->gettext('eventcoloring'))),
+        'content' => $select_colors->show($this->rc->config->get('calendar_event_coloring', $this->defaults['calendar_event_coloring'])),
+      );
+
       $field_id = 'rcmfd_alarm';
       $select_type = new html_select(array('name' => '_alarm_type', 'id' => $field_id));
       $select_type->add($this->gettext('none'), '');
@@ -359,11 +372,12 @@ class calendar extends rcube_plugin
         'content' => $select_cal->show($this->rc->config->get('calendar_default_calendar', '')),
       );
       
+      
       // category definitions
       if (!$this->driver->categoriesimmutable) {
         $p['blocks']['categories']['name'] = $this->gettext('categories');
 
-        $categories = (array) $this->rc->config->get('calendar_categories', $this->default_categories);
+        $categories = (array) $this->driver->list_categories();
         $categories_list = '';
         foreach ($categories as $name => $color) {
           $key = md5($name);
@@ -430,6 +444,7 @@ class calendar extends rcube_plugin
         'calendar_first_hour'   => intval(get_input_value('_first_hour', RCUBE_INPUT_POST)),
         'calendar_work_start'   => intval(get_input_value('_work_start', RCUBE_INPUT_POST)),
         'calendar_work_end'     => intval(get_input_value('_work_end', RCUBE_INPUT_POST)),
+        'calendar_event_coloring'       => intval(get_input_value('_event_coloring', RCUBE_INPUT_POST)),
         'calendar_default_alarm_type'   => get_input_value('_alarm_type', RCUBE_INPUT_POST),
         'calendar_default_alarm_offset' => $default_alam,
         'calendar_default_calendar'     => get_input_value('_default_calendar', RCUBE_INPUT_POST),
@@ -790,6 +805,7 @@ class calendar extends rcube_plugin
     $settings['work_start'] = (int)$this->rc->config->get('calendar_work_start', $this->defaults['calendar_work_start']);
     $settings['work_end'] = (int)$this->rc->config->get('calendar_work_end', $this->defaults['calendar_work_end']);
     $settings['agenda_range'] = (int)$this->rc->config->get('calendar_agenda_range', $this->defaults['calendar_agenda_range']);
+    $settings['event_coloring'] = (int)$this->rc->config->get('calendar_event_coloring', $this->defaults['calendar_event_coloring']);
     $settings['timezone'] = $this->timezone;
 
     // localization
@@ -868,7 +884,7 @@ class calendar extends rcube_plugin
         'end'   => gmdate('c', $this->fromGMT($event['end'])),   // so shift timestamps to users's timezone and render a date string
         'description' => strval($event['description']),
         'location'    => strval($event['location']),
-        'className'   => ($addcss ? 'fc-event-cal-'.asciiwords($event['calendar'], true).' ' : '') . 'cat-' . asciiwords($event['categories'], true),
+        'className'   => ($addcss ? 'fc-event-cal-'.asciiwords($event['calendar'], true).' ' : '') . 'fc-event-cat-' . asciiwords($event['categories'], true),
         'allDay'      => ($event['allday'] == 1),
       ) + $event;
     }

plugins/calendar/calendar_ui.js

@@ -274,7 +274,7 @@ function rcube_calendar_ui(settings)
       if (calendar.name)
         $('#event-calendar').show().children('.event-text').html(Q(calendar.name)).removeClass().addClass('event-text').addClass('cal-'+calendar.id);
       if (event.categories)
-        $('#event-category').show().children('.event-text').html(Q(event.categories)).removeClass().addClass('event-text '+event.className);
+        $('#event-category').show().children('.event-text').html(Q(event.categories)).removeClass().addClass('event-text cat-'+String(event.categories).replace(rcmail.identifier_expr, ''));
       if (event.free_busy)
         $('#event-free-busy').show().children('.event-text').html(Q(rcmail.gettext(event.free_busy, 'calendar')));
       if (event.priority != 1) {
@@ -1833,6 +1833,8 @@ function rcube_calendar_ui(settings)
         id: id
       }, cal);
       
+      this.calendars[id].color = settings.event_coloring % 2  ? '' : '#' + cal.color;
+      
       if ((active = cal.active || false)) {
         event_sources.push(this.calendars[id]);
       }

plugins/calendar/config.inc.php.dist

@@ -61,6 +61,13 @@ $rcmail_config['calendar_work_start'] = 6;
 // working hours end
 $rcmail_config['calendar_work_end'] = 18;
 
+// how to colorize events:
+// 0: according to calendar color
+// 1: according to category color
+// 2: calendar for outer, category for inner color
+// 3: category for outer, calendar for inner color
+$rcmail_config['calendar_event_coloring'] = 0;
+
 // event categories
 $rcmail_config['calendar_categories'] = array(
   'Personal' => 'c0c0c0',

plugins/calendar/lib/calendar_ui.php

@@ -88,18 +88,29 @@ class calendar_ui
    */
   function calendar_css($attrib = array())
   {
-    $categories = $this->rc->config->get('calendar_categories', array());
+    $mode = $this->rc->config->get('calendar_event_coloring', $this->calendar->defaults['calendar_event_coloring']);
-
+    $categories = $this->calendar->driver->list_categories();
     $css = "\n";
     
     foreach ((array)$categories as $class => $color) {
-        $class = 'cat-' . asciiwords($class, true);
+      $class = 'cat-' . asciiwords($class, true);
-        $css .= "." . $class . ",\n";
+      $css  .= ".$class { color: #$color }\n";
-        $css .= ".fc-event-" . $class . ",\n";
+      if ($mode > 0) {
-        $css .= "." . $class . " a {\n";
+        if ($mode == 2) {
-        $css .= "color: #" . $color . ";\n";
+          $css .= ".fc-event-$class .fc-event-bg {";
-        $css .= "border-color: #" . $color . ";\n";
+          $css .= " opacity: 0.9;";
+          $css .= " filter: alpha(opacity=90);";
+        }
+        else {
+          $css .= ".fc-event-$class.fc-event-skin, ";
+          $css .= ".fc-event-$class .fc-event-skin, ";
+          $css .= ".fc-event-$class .fc-event-inner {";
+        }
+        $css .= " background-color: #" . $color . ";";
+        if ($mode % 2)
+          $css .= " border-color: #$color;";
         $css .= "}\n";
+      }
     }
     
     $calendars = $this->calendar->driver->list_calendars();
@@ -108,16 +119,23 @@ class calendar_ui
         continue;
       $color = $prop['color'];
       $class = 'cal-' . asciiwords($id, true);
-      $css .= "li." . $class . ", ";
+      $css .= "li.$class, #eventshow .$class { color: #$color }\n";
-      $css .= "#eventshow ." . $class . " { ";
+      if ($mode != 1) {
-      $css .= "color: #" . $color . " }\n";
+        if ($mode == 3) {
-      $css .= ".fc-event-" . $class . ", ";
+          $css .= ".fc-event-$class .fc-event-bg {";
-      $css .= ".fc-event-" . $class . " .fc-event-inner, ";
+          $css .= " opacity: 0.9;";
-      $css .= ".fc-event-" . $class . " .fc-event-time {\n";
+          $css .= " filter: alpha(opacity=90);";
-      if (!$attrib['printmode'])
+        }
-        $css .= "background-color: #" . $color . ";\n";
+        else {
-      $css .= "border-color: #" . $color . ";\n";
+          $css .= ".fc-event-$class, ";
-      $css .= "}\n";
+          $css .= ".fc-event-$class .fc-event-inner {";
+        }
+        if (!$attrib['printmode'])
+          $css .= " background-color: #$color;";
+        if ($mode % 2 == 0)
+        $css .= " border-color: #$color;";
+        $css .= "}\n";
+      }
     }
     
     return html::tag('style', array('type' => 'text/css'), $css);

plugins/calendar/localization/de_CH.inc

@@ -12,6 +12,11 @@ $labels['workinghours'] = 'Arbeitszeiten';
 $labels['add_category'] = 'Katgorie hinzufügen';
 $labels['remove_category'] = 'Katgorie entfernen';
 $labels['defaultcalendar'] = 'Neue Termine erstellen in';
+$labels['eventcoloring'] = 'Färbung der Termine';
+$labels['coloringmode0'] = 'Farbe des Kalenders';
+$labels['coloringmode1'] = 'Farbe der Kategorie';
+$labels['coloringmode2'] = 'Kalenderfarbe aussen, Kategoriefarbe innen';
+$labels['coloringmode3'] = 'Kategoriefarbe aussen, Kalenderfarbe innen';
 
 // calendar
 $labels['calendar'] = 'Kalender';

plugins/calendar/localization/de_DE.inc

@@ -12,6 +12,11 @@ $labels['workinghours'] = 'Arbeitszeiten';
 $labels['add_category'] = 'Katgorie hinzufügen';
 $labels['remove_category'] = 'Katgorie entfernen';
 $labels['defaultcalendar'] = 'Neue Termine erstellen in';
+$labels['eventcoloring'] = 'Färbung der Termine';
+$labels['coloringmode0'] = 'Farbe des Kalenders';
+$labels['coloringmode1'] = 'Farbe der Kategorie';
+$labels['coloringmode2'] = 'Kalenderfarbe außen, Kategoriefarbe innen';
+$labels['coloringmode3'] = 'Kategoriefarbe außen, Kalenderfarbe innen';
 
 // calendar
 $labels['calendar'] = 'Kalender';

plugins/calendar/localization/en_US.inc

@@ -12,6 +12,11 @@ $labels['workinghours'] = 'Working hours';
 $labels['add_category'] = 'Add category';
 $labels['remove_category'] = 'Remove category';
 $labels['defaultcalendar'] = 'Create new events in';
+$labels['eventcoloring'] = 'Event coloring';
+$labels['coloringmode0'] = 'According to calendar';
+$labels['coloringmode1'] = 'According to category';
+$labels['coloringmode2'] = 'Calendar for outline, category for content';
+$labels['coloringmode3'] = 'Category for outline, calendar for content';
 
 // calendar
 $labels['calendar'] = 'Calendar';

plugins/calendar/skins/default/fullcalendar.css

@@ -682,6 +682,11 @@ table.fc-border-separate {
 	width: 18px;
 }
 
+.fc-event-handle .fc-event-inner {
+	border-color: inherit;
+	background-color: inherit;
+}
+
 .fc-view-table col.fc-event-date {
 	width: 7em;
 }