Merge pull request #2616 from rabuzarus/1206-events-template

use standard templates in events + frio templates for events

include/datetime.php

@@ -213,7 +213,7 @@ function dob($dob) {
  * @return string Parsed HTML output.
  */
 function datesel($format, $min, $max, $default, $id = 'datepicker') {
-	return datetimesel($format,$min,$max,$default,$id,true,false, '','');
+	return datetimesel($format,$min,$max,$default,'',$id,true,false, '','');
 }
 
 /**
@@ -231,7 +231,7 @@ function datesel($format, $min, $max, $default, $id = 'datepicker') {
  * @return string Parsed HTML output.
  */
 function timesel($format, $h, $m, $id='timepicker') {
-	return datetimesel($format,new DateTime(),new DateTime(),new DateTime("$h:$m"),$id,false,true);
+	return datetimesel($format,new DateTime(),new DateTime(),new DateTime("$h:$m"),'',$id,false,true);
 }
 
 /**
@@ -262,7 +262,7 @@ function timesel($format, $h, $m, $id='timepicker') {
  * @todo Once browser support is better this could probably be replaced with
  * native HTML5 date picker.
  */
-function datetimesel($format, $min, $max, $default, $id = 'datetimepicker', $pickdate = true, $picktime = true, $minfrom = '', $maxfrom = '', $required = false) {
+function datetimesel($format, $min, $max, $default, $label, $id = 'datetimepicker', $pickdate = true, $picktime = true, $minfrom = '', $maxfrom = '', $required = false) {
 
 	// First day of the week (0 = Sunday)
 	$firstDay = get_pconfig(local_user(),'system','first_day_of_week');
@@ -284,7 +284,7 @@ function datetimesel($format, $min, $max, $default, $id = 'datetimepicker', $pic
 	$minjs = $min ? ",minDate: new Date({$min->getTimestamp()}*1000), yearStart: " . $min->format('Y') : '';
 	$maxjs = $max ? ",maxDate: new Date({$max->getTimestamp()}*1000), yearEnd: " . $max->format('Y') : '';
 
-	$input_text = $default ? 'value="' . date($dateformat, $default->getTimestamp()) . '"' : '';
+	$input_text = $default ? date($dateformat, $default->getTimestamp()) : '';
 	$defaultdatejs = $default ? ",defaultDate: new Date({$default->getTimestamp()}*1000)" : '';
 
 	$pickers = '';
@@ -294,9 +294,9 @@ function datetimesel($format, $min, $max, $default, $id = 'datetimepicker', $pic
 	$extra_js = '';
 	$pickers .= ",dayOfWeekStart: ".$firstDay.",lang:'".$lang."'";
 	if($minfrom != '')
-		$extra_js .= "\$('#$minfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#$id').data('xdsoft_datetimepicker').setOptions({minDate: currentDateTime})}})";
+		$extra_js .= "\$('#id_$minfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({minDate: currentDateTime})}})";
 	if($maxfrom != '')
-		$extra_js .= "\$('#$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})";
+		$extra_js .= "\$('#id_$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})";
 
 	$readable_format = $dateformat;
 	$readable_format = str_replace('Y','yyyy',$readable_format);
@@ -305,10 +305,13 @@ function datetimesel($format, $min, $max, $default, $id = 'datetimepicker', $pic
 	$readable_format = str_replace('H','HH',$readable_format);
 	$readable_format = str_replace('i','MM',$readable_format);
 
-	$o .= "<div class='date'><input type='text' placeholder='$readable_format' name='$id' id='$id' $input_text />";
+	$tpl = get_markup_template('field_input.tpl');
-	$o .= '</div>';
+	$o .= replace_macros($tpl,array(
+			'$field' => array($id, $label, $input_text, '', (($required) ? '*' : ''), 'placeholder="' . $readable_format . '"'),
+		));
+
 	$o .= "<script type='text/javascript'>";
-	$o .= "\$(function () {var picker = \$('#$id').datetimepicker({step:5,format:'$dateformat' $minjs $maxjs $pickers $defaultdatejs}); $extra_js})";
+	$o .= "\$(function () {var picker = \$('#id_$id').datetimepicker({step:5,format:'$dateformat' $minjs $maxjs $pickers $defaultdatejs}); $extra_js})";
 	$o .= "</script>";
 
 	return $o;

mod/events.php

@@ -67,9 +67,9 @@ function events_post(&$a) {
 	$action = ($event_id == '') ? 'new' : "event/" . $event_id;
 	$onerror_url = $a->get_baseurl() . "/events/" . $action . "?summary=$summary&description=$desc&location=$location&start=$start_text&finish=$finish_text&adjust=$adjust&nofinish=$nofinish";
 
-        if(strcmp($finish,$start) < 0 && !$nofinish) {
+	if(strcmp($finish,$start) < 0 && !$nofinish) {
 		notice( t('Event can not end before it has started.') . EOL);
-                if(intval($_REQUEST['preview'])) {
+		if(intval($_REQUEST['preview'])) {
 			echo( t('Event can not end before it has started.'));
 			killme();
 		}
@@ -455,6 +455,7 @@ function events_content(&$a) {
 			'$baseurl'	=> $a->get_baseurl(),
 			'$tabs'		=> $tabs,
 			'$title'	=> t('Events'),
+			'$view'		=> t('View'),
 			'$new_event'=> array($a->get_baseurl().'/events/new',t('Create New Event'),'',''),
 			'$previus'	=> array($a->get_baseurl()."/events/$prevyear/$prevmonth",t('Previous'),'',''),
 			'$next'		=> array($a->get_baseurl()."/events/$nextyear/$nextmonth",t('Next'),'',''),
@@ -462,6 +463,11 @@ function events_content(&$a) {
 
 			'$events'	=> $events,
 
+			"today" => t("today"),
+			"month" => t("month"),
+			"week" => t("week"),
+			"day" => t("day"),
+
 
 		));
 
@@ -555,11 +561,11 @@ function events_content(&$a) {
 			'$title' => t('Event details'),
 			'$desc' => t('Starting date and Title are required.'),
 			'$s_text' => t('Event Starts:') . ' <span class="required" title="' . t('Required') . '">*</span>',
-			'$s_dsel' => datetimesel($f,new DateTime(),DateTime::createFromFormat('Y',$syear+5),DateTime::createFromFormat('Y-m-d H:i',"$syear-$smonth-$sday $shour:$sminute"),'start_text',true,true,'','',true),
+			'$s_dsel' => datetimesel($f,new DateTime(),DateTime::createFromFormat('Y',$syear+5),DateTime::createFromFormat('Y-m-d H:i',"$syear-$smonth-$sday $shour:$sminute"),t('Event Starts:'),'start_text',true,true,'','',true),
 			'$n_text' => t('Finish date/time is not known or not relevant'),
 			'$n_checked' => $n_checked,
 			'$f_text' => t('Event Finishes:'),
-			'$f_dsel' => datetimesel($f,new DateTime(),DateTime::createFromFormat('Y',$fyear+5),DateTime::createFromFormat('Y-m-d H:i',"$fyear-$fmonth-$fday $fhour:$fminute"),'finish_text',true,true,'start_text'),
+			'$f_dsel' => datetimesel($f,new DateTime(),DateTime::createFromFormat('Y',$fyear+5),DateTime::createFromFormat('Y-m-d H:i',"$fyear-$fmonth-$fday $fhour:$fminute"),t('Event Finishes:'),'finish_text',true,true,'start_text'),
 			'$a_text' => t('Adjust for viewer timezone'),
 			'$a_checked' => $a_checked,
 			'$d_text' => t('Description:'),
@@ -568,11 +574,17 @@ function events_content(&$a) {
 			'$l_orig' => $l_orig,
 			'$t_text' => t('Title:') . ' <span class="required" title="' . t('Required') . '">*</span>',
 			'$t_orig' => $t_orig,
+			'$summary' => array('summary', t('Title:'), $t_orig, '', '*'),
 			'$sh_text' => t('Share this event'),
+			'$share' => array('share', t('Share this event'), $sh_checked, ''),
 			'$sh_checked' => $sh_checked,
+			'$nofinish' => array('nofinish', t('Finish date/time is not known or not relevant'), $n_checked),
+			'$adjust' => array('adjust', t('Adjust for viewer timezone'), $a_checked),
 			'$preview' => t('Preview'),
 			'$acl' => $acl,
-			'$submit' => t('Submit')
+			'$submit' => t('Submit'),
+			'$basic' => t("Basic"),
+			'$advanced' => t("Advanced")
 
 		));
 

view/templates/event_form.tpl

@@ -12,24 +12,15 @@
 <input type="hidden" name="uri" value="{{$uri}}" />
 <input type="hidden" name="preview" id="event-edit-preview" value="0" />
 
-<div id="event-start-text">{{$s_text}}</div>
 {{$s_dsel}}
 
-<div id="event-finish-text">{{$f_text}}</div>
 {{$f_dsel}}
 
-<div id="event-datetime-break"></div>
+{{include file="field_checkbox.tpl" field=$nofinish}}
 
-<input type="checkbox" name="nofinish" value="1" id="event-nofinish-checkbox" {{$n_checked}} /> <div id="event-nofinish-text">{{$n_text}}</div>
+{{include file="field_checkbox.tpl" field=$adjust}}
 
-<div id="event-nofinish-break"></div>
+{{include file="field_input.tpl" field=$summary}}
-
-<input type="checkbox" name="adjust" value="1" id="event-adjust-checkbox" {{$a_checked}} /> <div id="event-adjust-text">{{$a_text}}</div>
-
-<div id="event-adjust-break"></div>
-
-<div id="event-summary-text">{{$t_text}}</div>
-<input type="text" id="event-summary" name="summary" value="{{$t_orig|escape:'html'}}" />
 
 
 <div id="event-desc-text">{{$d_text}}</div>
@@ -41,8 +32,9 @@
 
 <div id="event-location-break"></div>
 
-<input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div>
+{{if ! $eid}}
-<div id="event-share-break"></div>
+{{include file="field_checkbox.tpl" field=$share}}
+{{/if}}
 
 {{$acl}}
 

view/templates/event_head.tpl

@@ -21,6 +21,14 @@
 		$('#event-edit-preview').val(0);
 	}
 
+	// disable the input for the finish date if it is not available
+	function enableDisableFinishDate() {
+		if( $('#id_nofinish').is(':checked'))
+			$('#id_finish_text').prop("disabled", true);
+		else
+			$('#id_finish_text').prop("disabled", false);
+	}
+
 
 	$(document).ready(function() {
 		$('#events-calendar').fullCalendar({
@@ -152,9 +160,9 @@
 		$("#comment-edit-text-desc").bbco_autocomplete('bbcode');
 		{{/if}}
 
-		$('#event-share-checkbox').change(function() {
+		$('#id_share').change(function() {
 
-			if ($('#event-share-checkbox').is(':checked')) { 
+			if ($('#id_share').is(':checked')) { 
 				$('#acl-wrapper').show();
 			}
 			else {
@@ -175,6 +183,11 @@
 
 		}).trigger('change');
 
+		// disable the finish time input if the user disable it
+		$('#id_nofinish').change(function() {
+			enableDisableFinishDate()
+		}).trigger('change');
+
 	});
 
 </script>

view/theme/frio/css/style.css

@@ -163,6 +163,15 @@ a#item-delete-selected {
 .btn-link:focus, .btn-link:hover {
     color: #23527c;
 }
+.btn-eventnav, btn-eventnav:hover {
+    font-size: 16px;
+    background: none;
+    background-color: transparent;
+    padding: 0 14px;
+}
+.btn-separator {
+    border-left: 1px solid #777;
+}
 /*.btn-info {
     background: #6fdbe8;
     color: #fff!important;
@@ -1760,8 +1769,8 @@ ul.dropdown-menu li:hover {
 .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
-.events-content-wrapper, .message-content-wrapper, .apps-content-wrapper, 
+.message-content-wrapper, .apps-content-wrapper, .notifications-content-wrapper,
-.notifications-content-wrapper, .admin-content-wrapper, .group-content-wrapper {
+.admin-content-wrapper, .group-content-wrapper {
     min-height: calc(100vh - 150px);
     padding: 15px;
     padding-bottom: 20px;
@@ -1960,6 +1969,78 @@ ul li:hover .contact-wrapper a.contact-action-link:hover {
     clear: both;
 }
 
+/* Events page */
+#fc-header {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+#fc-header-left,
+#fc-header-right,
+#event-calendar-title {
+    display: inline-block;
+}
+#fc-title {
+    margin: 0;
+    padding-left: 20px;
+
+}
+#fc-header-right {
+    margin-top: -4px;
+}
+#event-calendar-title {
+    vertical-align: middle;
+}
+a#event-calendar-views {
+    padding: 6px 9px;
+    font-size: 14px
+}
+tr.fc-first,
+tr.fc-first th {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+}
+td.fc-day {
+    border-left: none;
+    border-right: none;
+    padding: 0 6px;
+}
+#events-calendar .fc-grid .fc-day-number {
+    float: left;
+    font-size: 0.9em;
+}
+.event-wrapper .event-owner {
+  margin-bottom: 15px;
+}
+.event-wrapper .event-owner img {
+    display: block;
+}
+.event-owner img {
+    margin-right: 5px;
+    height: 48px;
+    width:  48;
+    border-radius: 3px;
+}
+.event-wrapper .vevent {
+    margin-left: 0;
+    margin-right: 0;
+    box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
+}
+.event-wrapper .event-buttons {
+    margin-top: 15px;
+}
+#event-form-wrapper {
+    padding-top: 5px;
+}
+#event-edit-form-wrapper {
+    padding-top: 15px;
+}
+#event-nav a {
+    color: #555;
+}
+#event-edit-form-wrapper #event-edit-time {
+    padding: 10px 0;
+}
 /* Profiles Page */
 .profile-listing-table {
     display: table;

view/theme/frio/js/event.js

@@ -0,0 +1,124 @@
+$(document).ready(function() { 
+	// go to the permissions tab if the checkbox is checked
+	$('body').on("change", "#id_share", function() {
+
+		if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) { 
+			$('#acl-wrapper').show();
+			$("a#event-perms-lnk").parent("li").show();
+			toggleEventNav("a#event-perms-lnk");
+			eventAclActive();
+		}
+		else {
+			$('#acl-wrapper').hide();
+			$("a#event-perms-lnk").parent("li").hide();
+		}
+	}).trigger('change');
+
+	// disable the finish time input if the user disable it
+	$('body').on("change", "#id_nofinish", function() {
+		enableDisableFinishDate()
+	}).trigger('change');
+
+	// js for the permission sextion
+	$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
+		var selstr;
+		$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
+			selstr = $(this).text();
+			$('#jot-public').hide();
+		});
+		if(selstr == null) {
+			$('#jot-public').show();
+		}
+
+	}).trigger('change');
+
+	// Change the event nav menu.tabs on click
+	$("body").on("click", "#event-nav > li > a", function(e){
+		e.preventDefault();
+		toggleEventNav(this);
+	});
+
+	// this is experimental. We maybe can make use of it to inject
+	// some js code while the event modal opens
+	//$('body').on('show.bs.modal', function () {
+	//	enableDisableFinishDate();
+	//});
+
+	// clear some elements (e.g. the event-preview container) when
+	// selecting a event nav link so it don't appear more than once
+	$('body').on("click", "#event-nav a", function(e) {
+		$("#event-preview").empty();
+		e.preventDefault();
+	});
+
+});
+
+// Load the html of the actual event and incect the output to the
+// event-edit section
+function doEventPreview() {
+	$('#event-edit-preview').val(1);
+	$.post('events',$('#event-edit-form').serialize(), function(data) {
+		$("#event-preview").append(data);
+	});
+	$('#event-edit-preview').val(0);
+}
+
+
+// this function load the content of the edit url into a modal
+function eventEdit(url) {
+	var char = qOrAmp(url);
+	url = url + char + 'mode=none';
+
+	$.get(url, function(data) {
+		$("#modal-body").empty();
+		$("#modal-body").append(data);
+	}).done(function() {
+		loadModalTitle();
+	});
+}
+
+// the following functions show/hide the specific event-edit content 
+// in dependence of the selected nav
+function eventAclActive() {
+	$("#event-edit-wrapper, #event-preview, #event-desc-wrapper").hide();
+	$("#event-acl-wrapper").show();
+}
+
+
+function eventPreviewActive() {
+	$("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
+	$("#event-preview").show();
+	doEventPreview();
+}
+
+function eventEditActive() {
+	$("#event-acl-wrapper, #event-preview, #event-desc-wrapper").hide();
+	$("#event-edit-wrapper").show();
+
+	//make sure jot text does have really the active class (we do this because there are some
+	// other events which trigger jot text
+	toggleEventNav($("#event-edit-lnk"));
+}
+
+function eventDescActive() {
+	$("#event-edit-wrapper, #event-preview, #event-acl-wrapper").hide();
+	$("#event-desc-wrapper").show();
+}
+
+// Give the active "event-nav" list element the class "active"
+function toggleEventNav (elm) {
+	// select all li of #event-nav and remove the active class
+	$(elm).closest("#event-nav").children("li").removeClass("active");
+	// add the active class to the parent of the link which was selected
+	$(elm).parent("li").addClass("active");
+}
+
+
+
+// disable the input for the finish date if it is not available
+function enableDisableFinishDate() {
+	if( $('#id_nofinish').is(':checked'))
+		$('#id_finish_text').prop("disabled", true);
+	else
+		$('#id_finish_text').prop("disabled", false);
+}

view/theme/frio/js/modal.js

@@ -158,13 +158,22 @@ Dialog._load = function(url) {
  */
 function loadModalTitle() {
 	// clear the text of the title
-	//$("#modal-title").empty();
+	$("#modal-title").empty();
 
 	// hide the first element with the class "heading" of the modal body
 	$("#modal-body .heading").first().hide();
 
+	var title = "";
+
 	// get the text of the first element with "heading" class
-	var title = $("#modal-body .heading").first().text();
+	title = $("#modal-body .heading").first().text();
+
+	// for event modals we need some speacial handling
+	if($("#modal-body .event-wrapper .event-summary").length) {
+		title = '<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;';
+		var eventsum = $("#modal-body .event-wrapper .event-summary").text();
+		title = title + eventsum;
+	}
 
 	// and append it to modal title
 	if (title!=="") {

view/theme/frio/js/theme.js

@@ -505,4 +505,3 @@ String.prototype.rtrim = function() {
 	var trimmed = this.replace(/\s+$/g, '');
 	return trimmed;
 };
-

view/theme/frio/templates/event.tpl

@@ -0,0 +1,26 @@
+<script language="javascript" type="text/javascript"
+	  src="{{$baseurl}}/view/theme/frio/js/event.js"></script>
+
+{{foreach $events as $event}}
+	<div class="event-wrapper">
+		<div class="event">
+			<div class="media">
+				<div class="event-owner pull-left">
+					{{if $event.item.author_name}}
+					<a href="{{$event.item.author_link}}" ><img src="{{$event.item.author_avatar}}" /></a>
+					<a href="{{$event.item.author_link}}" >{{$event.item.author_name}}</a>
+					{{/if}}
+				</div>
+				<div class="media-body">
+					{{$event.html}}
+				</div>
+			</div>
+
+			<div class="event-buttons pull-right">
+				{{if $event.item.plink}}<a href="{{$event.plink.0}}" title="{{$event.plink.1}}" class="btn "><i class="fa fa-external-link" aria-hidden="true"></i></a>{{/if}}
+				{{if $event.edit}}<a onclick="eventEdit('{{$event.edit.0}}')" title="{{$event.edit.1}}" class="btn"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}
+			</div>
+			<div class="clear"></div>
+		</div>
+	</div>
+{{/foreach}}

view/theme/frio/templates/event_form.tpl

@@ -0,0 +1,178 @@
+<script language="javascript" type="text/javascript"
+	  src="{{$baseurl}}/view/theme/frio/js/event.js"></script>
+<div id="event-form-wrapper">
+	<h3 class="heading">{{$title}}</h3>
+
+	{{* The event edit navigation menu (text input, permissions, preview, filebrowser) *}}
+	<ul id="event-nav" class="nav nav-tabs event-nav" role="menubar" data-tabs="tabs">
+		{{* Mark the first list entry as active because it is the first which is active after opening
+			the modal. Changing of the activity status is done by js in event_head.tpl *}}
+		<li class="active" role="menuitem"><a id="event-edit-lnk" onclick="eventEditActive(); return false;">{{$basic}}</a></li>
+		<li role="menuitem"><a id="event-desc-lnk" onclick="eventDescActive(); return false;">{{$advanced}}</a></li>
+		{{if $acl}}<li role="menuitem" {{if !$sh_checked}} style="display: none"{{/if}}><a id="event-perms-lnk" onclick="eventAclActive();return false;">Permissions</a></li>{{/if}}
+		{{if $preview}}<li role="menuitem"><a id="event-preview-lnk" onclick="eventPreviewActive();return false;">{{$preview}}</a></li>{{/if}}
+		{{* commented out because it isn't implemented yet
+		<li role="menuitem"><a id="event-preview-link" onclick="fbrowserActive(); return false;"> Browser </a></li>
+		*}}
+	</ul>
+
+	<div id="event-edit-form-wrapper">
+	<form id="event-edit-form" action="{{$post}}" method="post" >
+
+		<input type="hidden" name="event_id" value="{{$eid}}" />
+		<input type="hidden" name="cid" value="{{$cid}}" />
+		<input type="hidden" name="uri" value="{{$uri}}" />
+		<input type="hidden" name="preview" id="event-edit-preview" value="0" />
+
+		{{* The tab conten with the necessary basic settings *}}
+		<div id="event-edit-wrapper">
+
+			{{* The event title *}}
+			{{include file="field_input.tpl" field=$summary}}
+
+			<div id="event-edit-time">
+				{{* The field for event starting time *}}
+				{{$s_dsel}}
+
+				{{* The field for event finish time *}}
+				{{$f_dsel}}
+
+				{{* checkbox if the the event doesn't have a finish time *}}
+				{{include file="field_checkbox.tpl" field=$nofinish}}
+
+				{{* checkbox for adjusting the event time to the timezone of the user *}}
+				{{include file="field_checkbox.tpl" field=$adjust}}
+			</div>
+
+			{{* checkbox to enable event sharing and the permissions tab *}}
+			{{if ! $eid}}
+			{{include file="field_checkbox.tpl" field=$share}}
+			{{/if}}
+
+			{{* The submit button - saves the event *}}
+			<div class="pull-right" >
+				<button id="event-submit" type="submit" name="submit" class="btn btn-primary" value="{{$submit|escape:'html'}}">{{$submit}}</button>
+			</div>
+			<div class="clear"></div>
+		</div>
+
+		{{* The advanced tab *}}
+		<div id="event-desc-wrapper" style="display: none">
+
+			{{* The textarea for the event description *}}
+			<div class="form-group">
+				<div id="event-desc-text"><b>{{$d_text}}</b></div>
+				<textarea id="comment-edit-text-desc" class="form-control" name="desc" >{{$d_orig}}</textarea>
+				<ul id="event-desc-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
+					{{* commented out because it isn't implemented yet
+					<li>
+						<a class="icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="desc">
+							<i class="fa fa-picture-o"></i>
+						</a>
+					</li>
+					*}}
+					<li>
+						<a class="icon bb-url" style="cursor: pointer;" title="{{$edurl|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="url" data-id="desc">
+							<i class="fa fa-link"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon bb-video" style="cursor: pointer;" title="{{$edvideo|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="video" data-id="desc">
+							<i class="fa fa-video-camera"></i>
+						</a>
+					</li>
+
+					<li>
+						<a class="icon underline" style="cursor: pointer;" title="{{$eduline|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="u" data-id="desc">
+							<i class="fa fa-underline"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon italic" style="cursor: pointer;" title="{{$editalic|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="i" data-id="desc">
+							<i class="fa fa-italic"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon bold" style="cursor: pointer;"  title="{{$edbold|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="b" data-id="desc">
+							<i class="fa fa-bold"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon quote" style="cursor: pointer;" title="{{$edquote|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="quote" data-id="desc">
+							<i class="fa fa-quote-left"></i>
+						</a>
+					</li>
+				</ul>
+				<div class="clear"></div>
+			</div>
+
+			{{* The textarea for the event location *}}
+			<div class="form-group">
+				<div id="event-location-text"><b>{{$l_text}}</b></div>
+				<textarea id="comment-edit-text-loc" class="form-control" name="location">{{$l_orig}}</textarea>
+				<ul id="comment-tools-loc" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
+					{{* commented out because it isn't implemented yet
+					<li>
+						<a class="icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="loc">
+							<i class="fa fa-picture-o"></i>
+						</a>
+					</li>
+					*}}
+					<li>
+						<a class="icon bb-url" style="cursor: pointer;" title="{{$edurl|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="url" data-id="loc">
+							<i class="fa fa-link"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon bb-video" style="cursor: pointer;" title="{{$edvideo|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="video" data-id="loc">
+							<i class="fa fa-video-camera"></i>
+						</a>
+					</li>
+
+					<li>
+						<a class="icon underline" style="cursor: pointer;" title="{{$eduline|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="u" data-id="loc">
+							<i class="fa fa-underline"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon italic" style="cursor: pointer;" title="{{$editalic|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="i" data-id="loc">
+							<i class="fa fa-italic"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon bold" style="cursor: pointer;"  title="{{$edbold|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="b" data-id="loc">
+							<i class="fa fa-bold"></i>
+						</a>
+					</li>
+					<li>
+						<a class="icon quote" style="cursor: pointer;" title="{{$edquote|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="quote" data-id="loc">
+							<i class="fa fa-quote-left"></i>
+						</a>
+					</li>
+				</ul>
+				<div class="clear"></div>
+			</div>
+		</div>
+
+		{{* The tab for the permissions (if event sharing is enabled) *}}
+		<div id="event-acl-wrapper" style="display: none">
+			{{$acl}}
+		</div>
+
+		{{* The tab for the event preview (content is inserted by js) *}}
+		<div id="event-preview" style="display: none"></div>
+
+		<div class="clear"></div>
+
+	</form>
+	</div>
+</div>
+
+<script>
+	$(document).ready( function() {
+		// disable finish date input if it isn't available
+		enableDisableFinishDate();
+		// load bbcode autocomplete for the description textarea
+		$('#comment-edit-text-desc, #comment-edit-text-loc').bbco_autocomplete('bbcode');
+	});
+</script>

view/theme/frio/templates/event_head.tpl

@@ -0,0 +1,155 @@
+
+<link rel='stylesheet' type='text/css' href='{{$baseurl}}/library/fullcalendar/fullcalendar.css' />
+<script language="javascript" type="text/javascript"
+	  src="{{$baseurl}}/library/fullcalendar/fullcalendar.min.js"></script>
+
+<script>
+	// loads the event into a modal
+	function showEvent(eventid) {
+			addToModal('{{$baseurl}}/events/?id='+eventid);
+	}
+
+	function changeView(action, viewName) {
+		$('#events-calendar').fullCalendar(action, viewName);
+		var view = $('#events-calendar').fullCalendar('getView');
+		$('#fc-title').text(view.title);
+	}
+
+	$(document).ready(function() {
+		// start the fullCalendar
+		$('#events-calendar').fullCalendar({
+			firstDay: {{$i18n.firstDay}},
+			monthNames: ['{{$i18n.January}}','{{$i18n.February}}','{{$i18n.March}}','{{$i18n.April}}','{{$i18n.May}}','{{$i18n.June}}','{{$i18n.July}}','{{$i18n.August}}','{{$i18n.September}}','{{$i18n.October}}','{{$i18n.November}}','{{$i18n.December}}'],
+			monthNamesShort: ['{{$i18n.Jan}}','{{$i18n.Feb}}','{{$i18n.Mar}}','{{$i18n.Apr}}','{{$i18n.May}}','{{$i18n.Jun}}','{{$i18n.Jul}}','{{$i18n.Aug}}','{{$i18n.Sep}}','{{$i18n.Oct}}','{{$i18n.Nov}}','{{$i18n.Dec}}'],
+			dayNames: ['{{$i18n.Sunday}}','{{$i18n.Monday}}','{{$i18n.Tuesday}}','{{$i18n.Wednesday}}','{{$i18n.Thursday}}','{{$i18n.Friday}}','{{$i18n.Saturday}}'],
+			dayNamesShort: ['{{$i18n.Sun}}','{{$i18n.Mon}}','{{$i18n.Tue}}','{{$i18n.Wed}}','{{$i18n.Thu}}','{{$i18n.Fri}}','{{$i18n.Sat}}'],
+			buttonText: {
+				prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
+				next: "<span class='fc-text-arrow'>&rsaquo;</span>",
+				prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
+				nextYear: "<span class='fc-text-arrow'>&raquo;</span>",
+				today: '{{$i18n.today}}',
+				month: '{{$i18n.month}}',
+				week: '{{$i18n.week}}',
+				day: '{{$i18n.day}}'
+			},
+			events: '{{$baseurl}}/events/json/',
+			header: {
+				left: '',
+			//	center: 'title',
+				right: ''
+			},			
+			timeFormat: 'H(:mm)',
+			eventClick: function(calEvent, jsEvent, view) {
+				showEvent(calEvent.id);
+			},
+			loading: function(isLoading, view) {
+				if(!isLoading) {
+					$('td.fc-day').dblclick(function() { window.location.href='/events/new?start='+$(this).data('date'); });
+				}
+			},
+			
+			eventRender: function(event, element, view) {
+				//console.log(view.name);
+				if (event.item['author-name']==null) return;
+				switch(view.name){
+					case "month":
+					element.find(".fc-event-title").html(
+						"<img src='{0}' style='height:10px;width:10px'>{1} : {2}".format(
+							event.item['author-avatar'],
+							event.item['author-name'],
+							event.title
+					));
+					break;
+					case "agendaWeek":
+					element.find(".fc-event-title").html(
+						"<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
+							event.item['author-avatar'],
+							event.item['author-name'],
+							event.item.desc,
+							event.item.location
+					));
+					break;
+					case "agendaDay":
+					element.find(".fc-event-title").html(
+						"<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
+							event.item['author-avatar'],
+							event.item['author-name'],
+							event.item.desc,
+							event.item.location
+					));
+					break;
+				}
+			}
+			
+		})
+		
+		// center on date
+		var args=location.href.replace(baseurl,"").split("/");
+		if (args.length>=4) {
+			$("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
+		} 
+
+		// echo the title
+		var view = $('#events-calendar').fullCalendar('getView');
+		$('#fc-title').text(view.title);
+
+		// show event popup
+		var hash = location.hash.split("-")
+		if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
+		
+	});
+</script>
+
+
+{{if $editselect != 'none'}}
+<script language="javascript" type="text/javascript"
+	  src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>
+<script language="javascript" type="text/javascript">
+
+
+	tinyMCE.init({
+		theme : "advanced",
+		mode : "textareas",
+		plugins : "bbcode,paste",
+		theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code",
+		theme_advanced_buttons2 : "",
+		theme_advanced_buttons3 : "",
+		theme_advanced_toolbar_location : "top",
+		theme_advanced_toolbar_align : "center",
+		theme_advanced_blockformats : "blockquote,code",
+		theme_advanced_resizing : true,
+		gecko_spellcheck : true,
+		paste_text_sticky : true,
+		entity_encoding : "raw",
+		add_unload_trigger : false,
+		remove_linebreaks : false,
+		//force_p_newlines : false,
+		//force_br_newlines : true,
+		forced_root_block : 'div',
+		content_css: "{{$baseurl}}/view/custom_tinymce.css",
+		theme_advanced_path : false,
+		setup : function(ed) {
+			ed.onInit.add(function(ed) {
+				ed.pasteAsPlainText = true;
+			});
+		}
+
+	});
+
+	$(document).ready(function() { 
+		$('.comment-edit-bb').hide();
+	});
+	{{else}}
+	<script language="javascript" type="text/javascript">
+	{{/if}}
+
+
+	$(document).ready(function() { 
+		{{if $editselect = 'none'}}
+		$("#comment-edit-text-desc").bbco_autocomplete('bbcode');
+		{{/if}}
+
+	});
+
+</script>

view/theme/frio/templates/events-js.tpl

@@ -0,0 +1,49 @@
+<div class="generic-page-wrapper">
+	{{$tabs}}
+	{{include file="section_title.tpl" title=$title}}
+
+	{{* The link to create a new event *}}
+	<div id="new-event-link"><a onclick="addToModal('{{$new_event.0}}')" >{{$new_event.1}}</a></div>
+
+	{{* We create our own fullcallendar header (with title & calendar view *}}
+	<div id="fc-header">
+		<div id="fc-header-right" class="pull-right">
+			{{* The dropdown to change the callendar view *}}
+			<ul class="nav nav-pills">
+				<li class="dropdown pull-right">
+					<a class="btn btn-link btn-sm dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="true">
+						<i class="fa fa-angle-down"></i> {{$view}}
+					</a>
+					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views">
+						<li role="menuitem">
+
+							<a onclick="changeView('changeView', 'month')">{{$month}}</a>
+						</li>
+						<li role="menuitem">
+
+							<a onclick="changeView('changeView', 'agendaWeek')">{{$week}}</a>
+						</li>
+						<li role="menuitem">
+
+							<a onclick="changeView('changeView', 'agendaDay')">{{$day}}</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+
+		{{* The buttons to change the month/weeks/days *}}
+		<div id="fc-fc-header-left" class="btn-group">
+			<button class="btn btn-eventnav" onclick="changeView('prev', false);" title="{{$prev}}"><i class="fa fa-angle-up" aria-hidden="true"></i></i></button>
+			<button class="btn btn-eventnav btn-separator" onclick="changeView('next', false);" title="{{$next}}"><i class="fa fa-angle-down" aria-hidden="true"></i></i></button>
+			<button class="btn btn-eventnav btn-separator" onclick="changeView('today', false);" title="{{$today}}"><i class="fa fa-bullseye"></i></button>
+		</div>
+
+		{{* The title (e.g. name of the mont/week/day) *}}
+		<div id="event-calendar-title"><h4 id="fc-title"></h4></div>
+
+	</div>
+
+	{{* This is the container where the fullCalendar is inserted through js *}}
+	<div id="events-calendar"></div>
+</div>

view/theme/frost/js/theme.js

@@ -70,9 +70,9 @@ $(document).ready(function() {
 		return false;
 	});*/
 
-	$('#event-share-checkbox').change(function() {
+	$('#id_share').change(function() {
 
-		if ($('#event-share-checkbox').is(':checked')) { 
+		if ($('#id_share').is(':checked')) { 
 			$('#acl-wrapper').show();
 		}
 		else {

view/theme/frost/templates/event_form.tpl

@@ -12,24 +12,15 @@
 <input type="hidden" name="uri" value="{{$uri}}" />
 <input type="hidden" name="preview" id="event-edit-preview" value="0" />
 
-<div id="event-start-text">{{$s_text}}</div>
 {{$s_dsel}}
 
-<div id="event-finish-text">{{$f_text}}</div>
 {{$f_dsel}}
 
-<div id="event-datetime-break"></div>
+{{include file="field_checkbox.tpl" field=$nofinish}}
 
-<input type="checkbox" name="nofinish" value="1" id="event-nofinish-checkbox" {{$n_checked}} /> <div id="event-nofinish-text">{{$n_text}}</div>
+{{include file="field_checkbox.tpl" field=$adjust}}
 
-<div id="event-nofinish-break"></div>
+{{include file="field_input.tpl" field=$summary}}
-
-<input type="checkbox" name="adjust" value="1" id="event-adjust-checkbox" {{$a_checked}} /> <div id="event-adjust-text">{{$a_text}}</div>
-
-<div id="event-adjust-break"></div>
-
-<div id="event-summary-text">{{$t_text}}</div>
-<input type="text" id="event-summary" name="summary" value="{{$t_orig}}" />
 
 
 <div id="event-desc-text">{{$d_text}}</div>
@@ -40,8 +31,9 @@
 <textarea id="event-location-textarea" rows="10" cols="70" name="location">{{$l_orig}}</textarea>
 <br />
 
-<input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div>
+{{if ! $eid}}
-<div id="event-share-break"></div>
+{{include file="field_checkbox.tpl" field=$share}}
+{{/if}}
 
 {{$acl}}
 

view/theme/quattro/templates/event_form.tpl

@@ -10,23 +10,23 @@
 	<input type="hidden" name="uri" value="{{$uri}}" />
 	<input type="hidden" name="preview" id="event-edit-preview" value="0" />
 
-	{{include file="field_custom.tpl" field=array('start_text', $s_text, $s_dsel, "")}}
+	{{$s_dsel}}
-	{{include file="field_custom.tpl" field=array('finish_text', $f_text, $f_dsel, "")}}
 
-	{{include file="field_checkbox.tpl" field=array('nofinish', $n_text, $n_checked, "")}}
+	{{$f_dsel}}
-	{{include file="field_checkbox.tpl" field=array('adjust', $a_text, $a_checked, "")}}
+
+	{{include file="field_checkbox.tpl" field=$nofinish}}
+
+	{{include file="field_checkbox.tpl" field=$adjust}}
 	<hr>
-	{{include file="field_input.tpl" field=array('summary', $t_text, $t_orig, "")}}
+	{{include file="field_input.tpl" field=$summary}}
 	{{include file="field_textarea.tpl" field=array('desc', $d_text, $d_orig, "")}}
 
 	{{include file="field_textarea.tpl" field=array('location', $l_text, $l_orig, "")}}
 	<hr>
 
-	<div class='field checkbox' id='div_id_share'>
+	{{if ! $eid}}
-		<label for='id_share'>{{$sh_text}}</label>
+	{{include file="field_checkbox.tpl" field=$share}}
-		<input type="checkbox" name='share' id='id_share' aria-describedby='share_tip' value="1" {{$sh_checked}}>
+	{{/if}}
-		
-	</div>
 
 	{{$acl}}
 

view/theme/vier/templates/event_form.tpl

@@ -13,24 +13,15 @@
 <input type="hidden" name="uri" value="{{$uri}}" />
 <input type="hidden" name="preview" id="event-edit-preview" value="0" />
 
-<div id="event-start-text">{{$s_text}}</div>
 {{$s_dsel}}
 
-<div id="event-finish-text">{{$f_text}}</div>
 {{$f_dsel}}
 
-<div id="event-datetime-break"></div>
+{{include file="field_checkbox.tpl" field=$nofinish}}
 
-<input type="checkbox" name="nofinish" value="1" id="event-nofinish-checkbox" {{$n_checked}} /> <div id="event-nofinish-text">{{$n_text}}</div>
+{{include file="field_checkbox.tpl" field=$adjust}}
 
-<div id="event-nofinish-break"></div>
+{{include file="field_input.tpl" field=$summary}}
-
-<input type="checkbox" name="adjust" value="1" id="event-adjust-checkbox" {{$a_checked}} /> <div id="event-adjust-text">{{$a_text}}</div>
-
-<div id="event-adjust-break"></div>
-
-<div id="event-summary-text">{{$t_text}}</div>
-<input type="text" size="65" id="event-summary" name="summary" value="{{$t_orig|escape:'html'}}" />
 
 
 <div id="event-desc-text">{{$d_text}}</div>
@@ -61,8 +52,9 @@
 
 <div id="event-location-break"></div>
 
-<input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div>
+{{if ! $eid}}
-<div id="event-share-break"></div>
+{{include file="field_checkbox.tpl" field=$share}}
+{{/if}}
 
 {{$acl}}