1
|
$(function() {
|
2
|
// fullcalendar
|
3
|
altair_fullcalendar.calendar_selectable();
|
4
|
});
|
5
|
altair_fullcalendar = {
|
6
|
calendar_selectable: function() {
|
7
|
var $calendar_selectable = $('#calendar_selectable'),
|
8
|
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');
|
9
|
|
10
|
var calendarColorPicker = altair_helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
|
11
|
|
12
|
if($calendar_selectable.length) {
|
13
|
$calendar_selectable.fullCalendar({
|
14
|
header: {
|
15
|
left: 'title today',
|
16
|
center: '',
|
17
|
right: 'month,agendaWeek,agendaDay,listWeek prev,next'
|
18
|
},
|
19
|
buttonIcons: {
|
20
|
prev: 'md-left-single-arrow',
|
21
|
next: 'md-right-single-arrow',
|
22
|
prevYear: 'md-left-double-arrow',
|
23
|
nextYear: 'md-right-double-arrow'
|
24
|
},
|
25
|
buttonText: {
|
26
|
today: ' ',
|
27
|
month: ' ',
|
28
|
week: ' ',
|
29
|
day: ' '
|
30
|
},
|
31
|
aspectRatio: 2.1,
|
32
|
defaultDate: moment(),
|
33
|
selectable: true,
|
34
|
selectHelper: true,
|
35
|
select: function(start, end) {
|
36
|
UIkit.modal.prompt('' +
|
37
|
'<h3 class="heading_b uk-margin-medium-bottom">New Event</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
|
38
|
'Event Color:' +
|
39
|
calendarColorPicker +
|
40
|
'</div>' +
|
41
|
'Event Title:',
|
42
|
'', function(newvalue){
|
43
|
if($.trim( newvalue ) !== '') {
|
44
|
var eventData,
|
45
|
eventColor = $('#calendar_colors_wrapper').find('input').val();
|
46
|
eventData = {
|
47
|
title: newvalue,
|
48
|
start: start,
|
49
|
end: end,
|
50
|
color: eventColor ? eventColor : ''
|
51
|
};
|
52
|
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
|
53
|
$calendar_selectable.fullCalendar('unselect');
|
54
|
}
|
55
|
}, {
|
56
|
labels: {
|
57
|
Ok: 'Add Event'
|
58
|
}
|
59
|
});
|
60
|
},
|
61
|
editable: true,
|
62
|
eventLimit: true,
|
63
|
timeFormat: '(HH)(:mm)',
|
64
|
events: [
|
65
|
{
|
66
|
title: 'All Day Event',
|
67
|
start: moment().startOf('month').add(25, 'days').format('YYYY-MM-DD')
|
68
|
},
|
69
|
{
|
70
|
title: 'Long Event',
|
71
|
start: moment().startOf('month').add(3, 'days').format('YYYY-MM-DD'),
|
72
|
end: moment().startOf('month').add(7, 'days').format('YYYY-MM-DD')
|
73
|
},
|
74
|
{
|
75
|
id: 999,
|
76
|
title: 'Repeating Event',
|
77
|
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
|
78
|
color: '#689f38'
|
79
|
},
|
80
|
{
|
81
|
id: 999,
|
82
|
title: 'Repeating Event',
|
83
|
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
|
84
|
color: '#689f38'
|
85
|
},
|
86
|
{
|
87
|
title: 'Conference',
|
88
|
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
|
89
|
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
|
90
|
},
|
91
|
{
|
92
|
title: 'Meeting',
|
93
|
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
|
94
|
color: '#7b1fa2'
|
95
|
},
|
96
|
{
|
97
|
title: 'Lunch',
|
98
|
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
|
99
|
color: '#d84315'
|
100
|
},
|
101
|
{
|
102
|
title: 'Meeting',
|
103
|
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
|
104
|
color: '#7b1fa2'
|
105
|
},
|
106
|
{
|
107
|
title: 'Happy Hour',
|
108
|
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
|
109
|
},
|
110
|
{
|
111
|
title: 'Dinner',
|
112
|
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
|
113
|
},
|
114
|
{
|
115
|
title: 'Birthday Party',
|
116
|
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
|
117
|
},
|
118
|
{
|
119
|
title: 'NEW RELEASE (link)',
|
120
|
url: 'http://themeforest.net/user/tzd/portfolio',
|
121
|
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
|
122
|
color: '#0097a7'
|
123
|
}
|
124
|
]
|
125
|
});
|
126
|
}
|
127
|
}
|
128
|
};
|
129
|
|
130
|
/*
|
131
|
// CALENDAR EVENTS
|
132
|
var $calendar_selectable = $('#calendar_selectable'),
|
133
|
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>'),
|
134
|
calendarColorPicker = altair_helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
|
135
|
|
136
|
// modal
|
137
|
var eUpdateModal = UIkit.modal("#calUpdate_event");
|
138
|
|
139
|
// color picker
|
140
|
altair_helpers.color_picker($('#eUpdate_colors'));
|
141
|
|
142
|
// date range
|
143
|
$dp_start = $('#eUpdate_start');
|
144
|
$dp_end = $('#eUpdate_end');
|
145
|
|
146
|
dp_start_date = UIkit.datepicker($dp_start, {
|
147
|
format:'YYYY-MM-DD'
|
148
|
});
|
149
|
dp_end_date = UIkit.datepicker($dp_end, {
|
150
|
format:'YYYY-MM-DD'
|
151
|
});
|
152
|
$dp_start.on('change',function() {
|
153
|
dp_end_date.options.minDate = $dp_start.val();
|
154
|
});
|
155
|
$dp_end.on('change',function() {
|
156
|
dp_start_date.options.maxDate = moment($dp_end.val()).add(1, 'days').format('YYYY-MM-DD');
|
157
|
});
|
158
|
|
159
|
|
160
|
if ($calendar_selectable.length) {
|
161
|
$calendar_selectable.fullCalendar({
|
162
|
header: {
|
163
|
left: 'title today',
|
164
|
center: '',
|
165
|
right: 'month,agendaWeek,agendaDay prev,next'
|
166
|
},
|
167
|
buttonIcons: {
|
168
|
prev: 'md-left-single-arrow',
|
169
|
next: 'md-right-single-arrow',
|
170
|
prevYear: 'md-left-double-arrow',
|
171
|
nextYear: 'md-right-double-arrow'
|
172
|
},
|
173
|
buttonText: {
|
174
|
today: ' ',
|
175
|
month: ' ',
|
176
|
week: ' ',
|
177
|
day: ' '
|
178
|
},
|
179
|
aspectRatio: 2.1,
|
180
|
defaultDate: moment(),
|
181
|
selectable: true,
|
182
|
selectHelper: true,
|
183
|
eventClick: function (event, element) {
|
184
|
|
185
|
var e_title = event.title,
|
186
|
e_start = event.start ? moment(new Date(event.start)).format('YYYY-MM-DD') : '',
|
187
|
e_end = event.end ? moment(new Date(event.end)).subtract('1', 'days').format('YYYY-MM-DD') : '',
|
188
|
updatedEvent = event;
|
189
|
|
190
|
// update fields
|
191
|
var uTitle = $('#eUpdate_title').val(e_title),
|
192
|
uStart = $('#eUpdate_start').val(e_start),
|
193
|
uEnd = $('#eUpdate_end').val(e_end);
|
194
|
|
195
|
altair_md.update_input($('#eUpdate_title,#eUpdate_start,#eUpdate_end'));
|
196
|
|
197
|
// reset colorpicker
|
198
|
$('#eUpdate_colors')
|
199
|
.find('.active_color').removeClass('active_color')
|
200
|
.end()
|
201
|
.find('input').val('');
|
202
|
|
203
|
// reset datepicker
|
204
|
dp_end_date.options.minDate = (e_start != '') ? e_start : false;
|
205
|
dp_start_date.options.maxDate = (e_end != '') ? moment(e_end).add(1, 'days').format('YYYY-MM-DD') : false;
|
206
|
|
207
|
// show modal
|
208
|
eUpdateModal.show();
|
209
|
|
210
|
// save event
|
211
|
$('#eUpdate_btn').off('click').on('click', function (e) {
|
212
|
e.preventDefault();
|
213
|
var start = uStart.val(),
|
214
|
end = uEnd.val(),
|
215
|
color = $('#eUpdate_colors').find('input').val();
|
216
|
|
217
|
updatedEvent['title'] = uTitle.val();
|
218
|
updatedEvent['start'] = (start != '') ? moment(new Date(start)).format() : '';
|
219
|
updatedEvent['end'] = (end != '') ? moment(new Date(end)).add(1, 'days').format() : '';
|
220
|
if (color != '') {
|
221
|
updatedEvent['color'] = color;
|
222
|
}
|
223
|
|
224
|
// SAVE EVENT OBJECT TO DB
|
225
|
|
226
|
|
227
|
// update event (add it as a success callback after adding to db)
|
228
|
$calendar_selectable.fullCalendar('updateEvent', event);
|
229
|
|
230
|
// hide modal
|
231
|
eUpdateModal.hide();
|
232
|
})
|
233
|
|
234
|
},
|
235
|
select: function (start, end) {
|
236
|
UIkit.modal.prompt('' +
|
237
|
'<h3 class="heading_b uk-margin-medium-bottom">New Event</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
|
238
|
'Event Color:' +
|
239
|
calendarColorPicker +
|
240
|
'</div>' +
|
241
|
'Event Title:',
|
242
|
'', function (newvalue) {
|
243
|
if ($.trim(newvalue) !== '') {
|
244
|
var eventData,
|
245
|
eventColor = $('#calendar_colors_wrapper').find('input').val();
|
246
|
eventData = {
|
247
|
title: newvalue,
|
248
|
start: start,
|
249
|
end: end,
|
250
|
color: eventColor ? eventColor : ''
|
251
|
};
|
252
|
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
|
253
|
$calendar_selectable.fullCalendar('unselect');
|
254
|
}
|
255
|
}, {
|
256
|
labels: {
|
257
|
Ok: 'Add Event'
|
258
|
}
|
259
|
});
|
260
|
},
|
261
|
editable: true,
|
262
|
eventLimit: true,
|
263
|
timeFormat: '(HH)(:mm)',
|
264
|
events: [
|
265
|
{
|
266
|
title: 'All Day Event',
|
267
|
start: moment().startOf('month').add(25, 'days').format('YYYY-MM-DD')
|
268
|
},
|
269
|
{
|
270
|
title: 'Long Event',
|
271
|
start: moment().startOf('month').add(3, 'days').format('YYYY-MM-DD'),
|
272
|
end: moment().startOf('month').add(7, 'days').format('YYYY-MM-DD')
|
273
|
},
|
274
|
{
|
275
|
id: 999,
|
276
|
title: 'Repeating Event',
|
277
|
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
|
278
|
color: '#689f38'
|
279
|
},
|
280
|
{
|
281
|
id: 999,
|
282
|
title: 'Repeating Event',
|
283
|
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
|
284
|
color: '#689f38'
|
285
|
},
|
286
|
{
|
287
|
title: 'Conference',
|
288
|
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
|
289
|
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
|
290
|
},
|
291
|
{
|
292
|
title: 'Meeting',
|
293
|
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
|
294
|
color: '#7b1fa2'
|
295
|
},
|
296
|
{
|
297
|
title: 'Lunch',
|
298
|
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
|
299
|
color: '#d84315'
|
300
|
},
|
301
|
{
|
302
|
title: 'Meeting',
|
303
|
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
|
304
|
color: '#7b1fa2'
|
305
|
},
|
306
|
{
|
307
|
title: 'Happy Hour',
|
308
|
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
|
309
|
},
|
310
|
{
|
311
|
title: 'Dinner',
|
312
|
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
|
313
|
},
|
314
|
{
|
315
|
title: 'Birthday Party',
|
316
|
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
|
317
|
},
|
318
|
{
|
319
|
title: 'NEW RELEASE (link)',
|
320
|
url: 'http://themeforest.net/user/tzd/portfolio',
|
321
|
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
|
322
|
color: '#0097a7'
|
323
|
}
|
324
|
]
|
325
|
});
|
326
|
}
|
327
|
*/
|