%PDF-
%PDF-
Mini Shell
Mini Shell
<div id="loading" style="margin-left:150px;position:absolute;display:none">
{{ "Loading"|get_lang }} …
</div>
<div id="calendar"></div>
<div class="modal fade" tabindex="-1" role="dialog" id="simple-dialog-form">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ 'Close'|get_lang }}">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{ 'Details'|get_lang }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">{{ 'Type' }}</label>
<div class="col-sm-8">
<p id="simple_type"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">{{ "Date"|get_lang }}</label>
<div class="col-sm-8">
<p>
<span id="simple_start_date"></span>
<span id="simple_end_date"></span>
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">{{ "Title"|get_lang }}</label>
<div class="col-sm-8">
<p id="simple_title"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">{{ "Description"|get_lang }}</label>
<div class="col-sm-8">
<p id="simple_content"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">{{ "AccountEmail"|get_plugin_lang('ZoomPlugin') }}</label>
<div class="col-sm-8">
<p id="simple_account"></p>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Close'|get_lang }}</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
var cookieData = Cookies.getJSON('agenda_cookies');
var defaultView = (cookieData && cookieData.view) || '{{ default_view }}';
var defaultStartDate = (cookieData && cookieData.start) || moment.now();
var CustomListViewGrid = ListViewGrid.extend({
fgSegHtml: function (seg) {
var view = this.view;
var classes = ['fc-list-item'].concat(this.getSegCustomClasses(seg));
var bgColor = this.getSegBackgroundColor(seg);
var event = seg.event;
var url = event.url;
var timeHtml;
if (view.isMultiDayEvent(event)) { // if the event appears to span more than one day
if (seg.isStart || seg.isEnd) { // outer segment that probably lasts part of the day
timeHtml = htmlEscape(this.getEventTimeText(seg));
} else { // inner segment that lasts the whole day
timeHtml = view.getAllDayHtml();
}
} else {
// Display the normal time text for the *event's* times
timeHtml = htmlEscape(this.getEventTimeText(event));
}
if (url) {
classes.push('fc-has-url');
}
return '<tr class="' + classes.join(' ') + '">' +
(this.displayEventTime
? '<td class="fc-list-item-time ' + view.widgetContentClass + '">' + (timeHtml || '') + '</td>'
: ''
) +
'<td class="fc-list-item-marker ' + view.widgetContentClass + '">' +
'<span class="fc-event-dot"' +
(bgColor ? ' style="background-color:' + bgColor + '"' : '') +
'></span>' +
'</td>' +
'<td class="fc-list-item-title ' + view.widgetContentClass + '">' +
'<a' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
htmlEscape(seg.event.title || '') + (seg.event.description || '') +
'</a>' +
'</td>' +
'</tr>';
},
// render the event segments in the view
renderSegList: function (allSegs) {
var segsByDay = this.groupSegsByDay(allSegs); // sparse array
var dayIndex;
var daySegs;
var i;
var tableEl = $('<table class="fc-list-table"><tbody/></table>');
var tbodyEl = tableEl.find('tbody');
var eventList = [];
for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
daySegs = segsByDay[dayIndex];
if (daySegs) { // sparse array, so might be undefined
this.sortEventSegs(daySegs);
for (i = 0; i < daySegs.length; i++) {
var event = daySegs[i].event;
if (jQuery.inArray(event.id, eventList) !== -1) {
continue;
}
eventList.push(event.id);
// append a day header
tbodyEl.append(this.dayHeaderHtml(
this.view.start.clone().add(dayIndex, 'days'),
event
));
tbodyEl.append(daySegs[i].el); // append event row
}
}
}
this.el.empty().append(tableEl);
},
// generates the HTML for the day headers that live amongst the event rows
dayHeaderHtml: function (dayDate, event) {
var view = this.view;
var mainFormat = 'LL';
var altFormat = 'dddd';
var checkIfSame = true;
if (event.end) {
checkIfSame = event.end.format(mainFormat) === dayDate.format(mainFormat);
}
return '<tr class="fc-list-heading" data-date="' + dayDate.format('YYYY-MM-DD') + '">' +
'<td class="' + view.widgetHeaderClass + '" colspan="3">' +
(
mainFormat
? view.buildGotoAnchorHtml(
dayDate,
{ 'class': 'fc-list-heading-main' },
htmlEscape(dayDate.format(mainFormat)) // inner HTML
)
: ''
) +
(
(checkIfSame === false && mainFormat)
? view.buildGotoAnchorHtml(
dayDate,
{ 'class': 'fc-list-heading-main' },
' - ' + htmlEscape(event.end.format(mainFormat)) // inner HTML
)
: ''
) +
(
altFormat
? view.buildGotoAnchorHtml(
dayDate,
{ 'class': 'fc-list-heading-alt' },
htmlEscape(dayDate.format(altFormat)) // inner HTML
)
: ''
) +
'</td>' +
'</tr>'
}
})
var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
var View = ListView; // the class that all views must inherit from
var CustomView; // our subclass
CustomView = View.extend({ // make a subclass of View
initialize: function () {
this.grid = new CustomListViewGrid(this);
this.scroller = new Scroller({
overflowX: 'hidden',
overflowY: 'auto'
});
}
})
FC.views.CustomView = CustomView; // register our class with the view system
var height = '';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
height = 'auto';
}
$('#calendar').fullCalendar({
height: height,
header: {
left: 'today,prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,CustomView'
},
views: {
CustomView: { // name of view
type: 'list',
buttonText: '{{ 'AgendaList'|get_lang | escape('js') }}',
duration: { month: 1 },
defaults: {
'listDayAltFormat': 'dddd' // day-of-week is nice-to-have
}
},
month: {
'displayEventEnd': true
}
},
locale: '{{ region_value }}',
defaultView: defaultView,
defaultDate: defaultStartDate,
firstHour: 8,
firstDay: 1,
{% if fullcalendar_settings %}
{{ fullcalendar_settings }}
{% endif %}
selectable: false,
selectHelper: true,
viewRender: function (view, element) {
var data = {
'view': view.name,
'start': view.intervalStart.format('YYYY-MM-DD')
};
Cookies.set('agenda_cookies', data, 1); // Expires 1 day
},
eventRender: function (event, element) {
{% if on_hover_info.description %}
if (event.description) {
element.qtip({
content: event.description,
position: {
at: 'top center',
my: 'bottom center',
viewport: $(window)
}
});
}
{% endif %}
},
eventClick: function (calEvent, jsEvent, view) {
var start = calEvent.start;
var end = calEvent.end;
var diffDays = moment(end).diff(start, 'days');
var endDateMinusOne = '';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// If event is not editable then just return the qtip
{% if on_hover_info.description %}
if (calEvent.description) {
$(this).qtip({
overwrite: false,
show: { ready: true },
content: calEvent.description,
position: {
at: 'top center',
my: 'bottom center',
viewport: $(window)
}
});
}
{% endif %}
return;
}
var clone = end.clone();
endDateMinusOne = clone.subtract(1, 'days').format('{{ js_format_date }}');
var startDateToString = start.format("{{ js_format_date }}");
// Simple form
$('#simple_start_date').text(startDateToString);
if (diffDays > 1) {
$('#simple_end_date').text(' - ' + endDateMinusOne);
} else if (diffDays == 0) {
var start_date_value = start.format('ll');
var startTime = start.format('LT');
var endTime = end.format('LT');
$('#simple_start_date').html('');
$('#simple_end_date').html(start_date_value + ' (' + startTime + ' - ' + endTime + ') ');
} else {
$('#simple_end_date').text('');
}
$('#simple_type').text(calEvent.typeName);
$('#simple_title').text(calEvent.title);
$('#simple_content').empty().text(calEvent.description);
if (calEvent.accountEmail) {
$('#simple_account').text(calEvent.accountEmail).parents('.form-group').show();
} else {
$('#simple_account').empty().parents('.form-group').hide();
}
$('#simple-dialog-form').modal('show');
},
editable: false,
events: "{{ web_agenda_ajax_url }}&a=get_events",
axisFormat: 'H(:mm)', // pm-am format -> h(:mm)a
timeFormat: 'H:mm', // pm-am format -> h:mm
loading: function (bool) {
if (bool) {
$('#loading').show();
} else {
$('#loading').hide();
}
}
})
})
</script>
Zerion Mini Shell 1.0