]> git.mxchange.org Git - friendica.git/commitdiff
frio: first part for event template work
authorrabuzarus <>
Sun, 12 Jun 2016 16:23:10 +0000 (18:23 +0200)
committerrabuzarus <>
Sun, 12 Jun 2016 16:23:10 +0000 (18:23 +0200)
mod/events.php
view/theme/frio/css/style.css
view/theme/frio/js/modal.js
view/theme/frio/js/theme.js
view/theme/frio/templates/event.tpl [new file with mode: 0644]
view/theme/frio/templates/event_form.tpl [new file with mode: 0644]
view/theme/frio/templates/event_head.tpl [new file with mode: 0644]
view/theme/frio/templates/events-js.tpl [new file with mode: 0644]

index 633aaf0c1d6c0335ba78e9717a51d1d7b8ab3603..46f33355b9c850cdc91af1e08a053623f20ff2e2 100644 (file)
@@ -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();
                }
@@ -462,6 +462,12 @@ function events_content(&$a) {
 
                        '$events'       => $events,
 
+                       // eignene
+                       "today" => t("today"),
+                       "month" => t("month"),
+                       "week" => t("week"),
+                       "day" => t("day"),
+
 
                ));
 
index 49d78e13140d155847a31050f3724982d1df50ed..185888b7180adad7ea7cd5e0284a7cc8636d14ba 100644 (file)
@@ -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;
@@ -1901,6 +1910,59 @@ ul li:hover .contact-wrapper a.contact-action-link:hover {
 #poke-wrapper-end {
     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-owner img {
+    margin-right: 5px;
+    height: 48px;
+    width:  48;
+    border-radius: 3px;
+}
+.event-wrapper .event-buttons {
+    margin-top: 15px;
+}
 /*
 * Overwriting for transparency and other colors
 */
index 0a881f10f6f9d5aa06a35cfd94abf508c5c032ef..f99946019afaf215ab2bf8d3e901e910a6721527 100644 (file)
@@ -158,8 +158,17 @@ function loadModalTitle() {
        // 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!=="") {
index 28221dcd0d1ff7a2c31bc347d0d27ba6ad4880b3..414df7c1a9103557f88e57bc305a76c0bcf7b61f 100644 (file)
@@ -482,3 +482,159 @@ String.prototype.rtrim = function() {
        return trimmed;
 };
 
+
+        
+//     $(document).ready(function() {
+//             $('#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]);
+//             
+//     });
+       
+//             $(document).ready(function() {
+//             $('#events-calendar').fullCalendar({
+//
+//                     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]);
+//             
+//     });
+       
\ No newline at end of file
diff --git a/view/theme/frio/templates/event.tpl b/view/theme/frio/templates/event.tpl
new file mode 100644 (file)
index 0000000..380bc7c
--- /dev/null
@@ -0,0 +1,19 @@
+
+{{foreach $events as $event}}
+       <div class="event-wrapper">
+               <div class="event">
+                       <div class="event-owner">
+                               {{if $event.item.author_name}}
+                               <a href="{{$event.item.author_link}}" ><img src="{{$event.item.author_avatar}}" />{{$event.item.author_name}}</a>
+                               {{/if}}
+                       </div>
+                       {{$event.html}}
+
+                       <div class="event-buttons pull-right">
+                               {{if $event.item.plink}}<a href="{{$event.plink.0}}" title="{{$event.plink.1}}" target="_blank" class="btn "><i class="fa fa-external-link" aria-hidden="true"></i></a>{{/if}}
+                               {{if $event.edit}}<a href="{{$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}}
diff --git a/view/theme/frio/templates/event_form.tpl b/view/theme/frio/templates/event_form.tpl
new file mode 100644 (file)
index 0000000..ff59833
--- /dev/null
@@ -0,0 +1,53 @@
+
+<h3 class="heading">{{$title}}</h3>
+
+<p>
+{{$desc}}
+</p>
+
+<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" />
+
+<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>
+
+<input type="checkbox" name="nofinish" value="1" id="event-nofinish-checkbox" {{$n_checked}} /> <div id="event-nofinish-text">{{$n_text}}</div>
+
+<div id="event-nofinish-break"></div>
+
+<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>
+<textarea id="event-desc-textarea" name="desc">{{$d_orig}}</textarea>
+
+
+<div id="event-location-text">{{$l_text}}</div>
+<textarea id="event-location-textarea" name="location">{{$l_orig}}</textarea>
+
+<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>
+<div id="event-share-break"></div>
+
+{{$acl}}
+
+<div class="clear"></div>
+<input id="event-edit-preview" type="submit" name="preview" value="{{$preview|escape:'html'}}" onclick="doEventPreview(); return false;" />
+<input id="event-submit" type="submit" name="submit" value="{{$submit|escape:'html'}}" />
+</form>
+
diff --git a/view/theme/frio/templates/event_head.tpl b/view/theme/frio/templates/event_head.tpl
new file mode 100644 (file)
index 0000000..e11f93e
--- /dev/null
@@ -0,0 +1,188 @@
+
+<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>
+
+       function showEvent(eventid) {
+               
+                       addToModal('{{$baseurl}}/events/?id='+eventid);
+       
+       }
+
+       function doEventPreview() {
+               $('#event-edit-preview').val(1);
+               $.post('events',$('#event-edit-form').serialize(), function(data) {
+                       $.colorbox({ html: data });
+               });
+               $('#event-edit-preview').val(0);
+       }
+
+       function changeView(action, viewName) {
+               $('#events-calendar').fullCalendar(action, viewName);
+               var view = $('#events-calendar').fullCalendar('getView');
+               $('#title').text(view.title);
+       }
+
+       $(document).ready(function() {
+               $('#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}}
+
+               $('#event-share-checkbox').change(function() {
+
+                       if ($('#event-share-checkbox').is(':checked')) { 
+                               $('#acl-wrapper').show();
+                       }
+                       else {
+                               $('#acl-wrapper').hide();
+                       }
+               }).trigger('change');
+
+
+               $('#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');
+
+       });
+
+</script>
+
diff --git a/view/theme/frio/templates/events-js.tpl b/view/theme/frio/templates/events-js.tpl
new file mode 100644 (file)
index 0000000..dcd522c
--- /dev/null
@@ -0,0 +1,41 @@
+<div class="generic-page-wrapper">
+       {{$tabs}}
+       {{include file="section_title.tpl" title=$title}}
+
+       <div id="new-event-link"><a onclick="addToModal('{{$new_event.0}}')" >{{$new_event.1}}</a></div>
+
+       <div id="fc-header">
+               <div id="fc-header-right" class="pull-right">
+                       <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> Views
+                                       </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>
+               <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>
+
+               <div id="event-calendar-title"><h4 id="fc-title"></h4></div>
+
+       </div>
+       <div id="events-calendar"></div>
+</div>