Use the same category input and management as the contacts app

apps/calendar/index.php

@@ -22,6 +22,7 @@ foreach($calendars as $calendar){
 	$eventSources[] = OC_Calendar_Calendar::getEventSourceInfo($calendar);
 }
 OC_Hook::emit('OC_Calendar', 'getSources', array('sources' => &$eventSources));
+$categories = OC_Calendar_App::getCategoryOptions();
 
 //Fix currentview for fullcalendar
 if(OC_Preferences::getValue(OC_USER::getUser(), 'calendar', 'currentview', 'month') == "oneweekview"){
@@ -45,9 +46,13 @@ OC_Util::addScript('calendar', 'calendar');
 OC_Util::addStyle('calendar', 'style');
 OC_Util::addScript('', 'jquery.multiselect');
 OC_Util::addStyle('', 'jquery.multiselect');
+OC_Util::addScript('contacts','jquery.multi-autocomplete');
+OC_Util::addScript('','oc-vcategories');
+OC_Util::addStyle('','oc-vcategories');
 OC_App::setActiveNavigationEntry('calendar_index');
 $tmpl = new OC_Template('calendar', 'calendar', 'user');
 $tmpl->assign('eventSources', $eventSources);
+$tmpl->assign('categories', $categories);
 if(array_key_exists('showevent', $_GET)){
 	$tmpl->assign('showevent', $_GET['showevent']);
 }

apps/calendar/js/calendar.js

@@ -32,13 +32,7 @@ Calendar={
 			$('#totime').timepicker({
 			    showPeriodLabels: false
 			});
-			$('#category').multiselect({
+			$('#category').multiple_autocomplete({source: categories});
-					header: false,
-					noneSelectedText: $('#category').attr('title'),
-					selectedList: 2,
-					minWidth:'auto',
-					classes: 'category',
-			});
 			Calendar.UI.repeat('init');
 			$('#end').change(function(){
 				Calendar.UI.repeat('end');
@@ -370,6 +364,11 @@ Calendar={
 			}
 			$('#'+id).addClass('active');
 		},
+		categoriesChanged:function(newcategories){
+			categories = $.map(newcategories, function(v) {return v;});
+			console.log('Calendar categories changed to: ' + categories);
+			$('#category').multiple_autocomplete('option', 'source', categories);
+		},
 		Calendar:{
 			overview:function(){
 				if($('#choosecalendar_dialog').dialog('isOpen') == true){
@@ -730,6 +729,8 @@ $(document).ready(function(){
 		loading: Calendar.UI.loading,
 		eventSources: eventSources
 	});
+	OCCategories.changed = Calendar.UI.categoriesChanged;
+	OCCategories.app = 'calendar';
 	$('#oneweekview_radio').click(function(){
 		$('#calendar_holder').fullCalendar('changeView', 'agendaWeek');
 	});

apps/calendar/lib/app.php

@@ -12,6 +12,7 @@
 OC_Calendar_App::$l10n = new OC_L10N('calendar');
 class OC_Calendar_App{
 	public static $l10n;
+	protected static $categories = null;
 
 	public static function getCalendar($id){
 		$calendar = OC_Calendar_Calendar::find( $id );
@@ -54,7 +55,7 @@ class OC_Calendar_App{
 		}
 	}
 
-	public static function getCategoryOptions()
+	protected static function getDefaultCategories()
 	{
 		return array(
 			self::$l10n->t('Birthday'),
@@ -75,6 +76,19 @@ class OC_Calendar_App{
 		);
 	}
 
+	protected static function getVCategories() {
+		if (is_null(self::$categories)) {
+			self::$categories = new OC_VCategories('calendar', null, self::getDefaultCategories());
+		}
+		return self::$categories;
+	}
+
+	public static function getCategoryOptions()
+	{
+		$categories = self::getVCategories()->categories();
+		return $categories;
+	}
+
 	public static function getRepeatOptions(){
 		return OC_Calendar_Object::getRepeatOptions(self::$l10n);
 	}

apps/calendar/templates/calendar.php

@@ -1,6 +1,7 @@
 				<script type='text/javascript'>
 				var defaultView = '<?php echo OC_Preferences::getValue(OC_USER::getUser(), 'calendar', 'currentview', 'month') ?>';
 				var eventSources = <?php echo json_encode($_['eventSources']) ?>;
+				var categories = <?php echo json_encode($_['categories']); ?>;
 				var dayNames = <?php echo json_encode($l->tA(array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'))) ?>;
 				var dayNamesShort = <?php echo json_encode($l->tA(array('Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'))) ?>;
 				var monthNames = <?php echo json_encode($l->tA(array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'))) ?>;

apps/calendar/templates/part.eventform.php

@@ -10,12 +10,8 @@
 		<tr>
 			<th width="75px"><?php echo $l->t("Category");?>:</th>
 			<td>
-				<select id="category" name="categories[]" multiple="multiple" title="<?php echo $l->t("Select category") ?>">
+				<input id="category" name="categories" type="text" placeholder="<?php echo $l->t('Separate categories with commas'); ?>">
-					<?php
+				<a class="action edit" onclick="$(this).tipsy('hide');OCCategories.edit();" title="<?php echo $l->t('Edit categories'); ?>"><img alt="<?php echo $l->t('Edit categories'); ?>" src="<?php echo image_path('core','actions/rename.svg')?>" class="svg action" style="width: 16px; height: 16px;"></a>
-					if (!isset($_['categories'])) {$_['categories'] = array();}
-					echo html_select_options($_['category_options'], $_['categories'], array('combine'=>true));
-					?>
-				</select>
 			</td>
 			<?php if(count($_['calendar_options']) > 1) { ?>
 			<th width="75px">&nbsp;&nbsp;&nbsp;<?php echo $l->t("Calendar");?>:</th>