☆ A M B ☆
You might want to try an older version. This thread isn't directly related but it does speak to some issues others, including myself, have had.
I've abandoned it entirely. Working on adapting this Bootstrap 3 Calendar using getResources to build the JSON file necessary for it.
There's also a beta release of migxCalendars out but it uses fullcalendar, which isn't of any use to me personally since it doesn't seem to be responsive (but maybe could be adapted, I'm not sure).
☆ A M B ☆
{
"success": 1,
"result": [
[[getResources?
&parents=`[[++calendar_resource_id]]`
&showHidden=`1`
&tpl=`calendarEventTPL`
&includeTVs=`1`
&tvPrefix=``
&processTVs=`1`
]]
]
}
<div class="page-header">
<h1>[[*longtitle]]</h1>
<h3></h3>
<div class="row">
<div class="pull-right form-inline">
<div class="btn-group">
<button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
<button class="btn btn-default" data-calendar-nav="today">Today</button>
<button class="btn btn-primary" data-calendar-nav="next">Next >></button>
</div>
<div class="btn-group">
<button class="btn btn-warning" data-calendar-view="year">Year</button>
<button class="btn btn-warning active" data-calendar-view="month">Month</button>
<button class="btn btn-warning" data-calendar-view="week">Week</button>
<button class="btn btn-warning" data-calendar-view="day">Day</button>
</div>
</div>
</div>
</div>
<div class="row">
<div id="calendar"></div>
</div>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<!--<script type="text/javascript" src="js/app.js"></script>-->
<script type="text/javascript">
(function($) {
"use strict";
var options = {
events_source: 'calevents.js',
view: 'month',
tmpl_path: 'tmpls/',
tmpl_cache: false,
day: 'now',
onAfterEventsLoad: function(events) {
if(!events) {
return;
}
var list = $('#eventlist');
list.html('');
$.each(events, function(key, val) {
$(document.createElement('li'))
.html('<a href="' + val.url + '">' + val.title + '</a>')
.appendTo(list);
});
},
onAfterViewLoad: function(view) {
$('.page-header h3').text(this.getTitle());
$('.btn-group button').removeClass('active');
$('button[data-calendar-view="' + view + '"]').addClass('active');
},
classes: {
months: {
general: 'label'
}
}
};
var calendar = $('#calendar').calendar(options);
$('.btn-group button[data-calendar-nav]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.navigate($this.data('calendar-nav'));
});
});
$('.btn-group button[data-calendar-view]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.view($this.data('calendar-view'));
});
});
$('#first_day').change(function(){
var value = $(this).val();
value = value.length ? parseInt(value) : null;
calendar.setOptions({first_day: value});
calendar.view();
});
$('#language').change(function(){
calendar.setLanguage($(this).val());
calendar.view();
});
$('#events-in-modal').change(function(){
var val = $(this).is(':checked') ? $(this).val() : null;
calendar.setOptions({modal: val});
});
$('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
//e.preventDefault();
//e.stopPropagation();
});
}(jQuery));
</script>
<link rel="stylesheet" href="css/calendar.css" media="screen">
There's also a beta release of migxCalendars out but it uses fullcalendar, which isn't of any use to me personally since it doesn't seem to be responsive (but maybe could be adapted, I'm not sure).
There's also a beta release of migxCalendars out but it uses fullcalendar, which isn't of any use to me personally since it doesn't seem to be responsive (but maybe could be adapted, I'm not sure).
there's not a problem filling the bootstrap - calendar with migxCalendars - dates
☆ A M B ☆
☆ A M B ☆
<!DOCTYPE html>
<html ng-app="migxAngular" id="ng-app">
<head>
<meta charset='utf-8' />
<base href="http://bootstrap.itristanmediagroup.modxcloud.com/" />
<meta name="robots" content="noopd,noydir,noindex,nofollow" />
<link rel="stylesheet" href="assets/components/migxcalendars/js/fullcalendar/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="assets/components/migxcalendars/css/style.css" type="text/css" />
<link type="text/css" href="assets/components/migxcalendars/js/fullcalendar/fullcalendar.print.css" rel="stylesheet" media="print">
</head>
<body>
<div id="migxcalCtrl" ng-controller="migxcalCtrl" >
<div id='script-warning'>
your ajax-resource seems not to work.
</div>
<div id='loading'>loading...</div>
<div id="migxcal_container">
<div id="migxcal_categories">
<ul>
<li class="migxcal_category" data-id="1" style="color:#fff;background-color:#f00;">Holiday</li>
</ul>
<ul>
<li class="migxcal_category" data-id="hide_published" >Hide Published</li>
<li class="migxcal_category" data-id="show_unpublished" >Show Unpublished</li>
</ul>
<h4>Date Containers</h4>
<ul>
<li class="migxcal_category datecontainer" id="datecontainer{{date_container.id}}" data-eventid="{{date_container.id}}" data-catid="{{date_container.categoryid}}" ng-repeat="date_container in date_containers">
{{date_container.title}}({{date_container.id}})
<button type="button" ng-click="closecontainer(date_container)" class="btn btn-default datecontainer-button btn-xs pull-right">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
</div>
<div id='calendar'></div>
</div>
<script type="text/javascript">
var migxcalController = null;
var migxcal_dragstart_day = null;
jQuery(document).ready(function() {
migxcalController = $('#migxcalCtrl').scope();
$('.migxcal_category').draggable({
zIndex: 999,
revert: true, // immediately snap back to original position
revertDuration: 0 //
});
});
function migxcalCtrl($scope, $http, Config, UiDialog) {
$scope.config = Config;
$scope.eventResize = function(event,revertFunc){
/*
if (!confirm("is this okay?")) {
revertFunc();
return;
}
*/
$scope.revertFunc = revertFunc;
event.allDay = event.allDay ? '1' : '0';
$scope.changeEventDates(event,'update');
}
$scope.eventDrop = function(event,revertFunc,jsEvent, ui, view){
var day = event.start.dayOfYear();
var week = event.start.isoWeek();
/*
if (event.Event_repeating == '1' && migxcal_dragstart_day != day && !confirm("Moving to another day will recreate all repeating dates!")) {
//move to other day
revertFunc();
return;
}
*/
if (event.Event_repeating == '1' && migxcal_dragstart_week != week ) {
//move to other week
alert("You can not move reapeatings to another week!");
revertFunc();
return;
}
$scope.revertFunc = revertFunc;
event.allDay = event.allDay ? '1' : '0';
$scope.changeEventDates(event,'update');
}
$scope.eventEdit = function(data){
var event_id = data.id || 0;
$scope.revertFunc = function(){};
$scope.editEvent(event_id);
}
$scope.eventPublish = function(data){
var event_id = data.id || 0;
var cfg = Config;
cfg.method = 'POST';
var dialogOptions = {};
var params = {};
params.configs = 'migxcalendar_dragdropdate';
params.action = 'mgr/migxdb/process';
params.processaction = 'publishdate';
params.object_id = event_id;
//params.original_request_uri = request_uri;
params.data = data;
var ajaxConfig = UiDialog.preparePostParams(cfg, params);
ajaxConfig.data = {
//data: data
};
$http(ajaxConfig).success(function(response, status, header, config) {
if (response){
var success = response.success || false;
var message = response.message || '';
if (success) {
} else {
alert(message);
}
}
$scope.refresh();
}).error(function(data, status, header, config) {
//UiDialog.error(data, status, header, config);
});
}
$scope.eventDropNew = function(event,el){
/*
if (!confirm("is this okay?")) {
revertFunc();
return;
}
*/
if (el.scope){
var datecontainer = el.scope().date_container;
if (datecontainer && datecontainer.repeating == '1'){
alert("You can not drag dates into containers with repeatings");
return;
}
}
$scope.revertFunc = function(){
return;
};
$scope.changeEventDates(event);
}
$scope.changeEventDates = function(event,action){
var end = '';
var start = '';
var action = action || 'edit';
if (event.end){
end = event.end.format();
}
if (event.start){
start = event.start.format();
}
var data = {
enddate : end,
startdate : start
};
if (event.allDay){
data.allday = event.allDay;
}
if (event.data){
if (event.data.id){
data.Event_categoryid = event.data.id;
}
if (event.data.catid){
data.Event_categoryid = event.data.catid;
}
if (event.data.eventid){
data.event_id = event.data.eventid;
}
}
var event_id = event.id || 'new';
if (action == 'edit'){
$scope.editEvent(event_id , angular.toJson(data));
}
if (action == 'update'){
$scope.updateEvent(event_id , angular.toJson(data));
}
}
$scope.hidePleaseWait = function(){
if ($scope.waiting){
UiDialog.hidePleaseWait();
$scope.waiting = false;
}
}
$scope.updateEvent = function(event_id,data) {
var cfg = Config;
cfg.method = 'POST';
var params = {
'configs':'migxcalendar_dragdropdate',
'object_id':event_id,
'action':'mgr/migxdb/update'
};
var ajaxConfig = UiDialog.preparePostParams(cfg, params);
ajaxConfig.data = {
data : data
};
UiDialog.showPleaseWait();
$http(ajaxConfig).success(function(response, status, header, config) {
$scope.refresh();
//UiDialog.hidePleaseWait();
$scope.waiting = true;
}).error(function(data, status, header, config) {
UiDialog.error(data, status, header, config);
});
}
$scope.editEvent = function(event_id,data) {
var cfg = Config;
cfg.method = 'POST';
var dialogOptions = {};
var params = {};
params.configs = 'migxcalendar_dragdropdate';
//params.action = 'mgr/migxdb/process';
params.action = 'web/migxdb/fields';
//params.processaction = 'updateevent';
params.object_id = event_id;
//params.original_request_uri = request_uri;
params.data = data;
UiDialog.loadModal($scope, Config, params, dialogOptions);
return;
}
$scope.refresh = function(){
$('#calendar').fullCalendar('refetchEvents');
$scope.relaodDateContainers();
}
$scope.closecontainer = function(datecontainer){
console.log($scope.date_containers['dc_'+datecontainer.id]);
console.log($scope.date_containers);
if (datecontainer.id){
delete $scope.date_containers['dc_'+datecontainer.id];
}
}
$scope.relaodDateContainers = function(){
$('.datecontainer').each(function(){
var data = $(this).data();
if (data.eventid){
$scope.loadDatesContainer(data.eventid);
}
})
}
$scope.loadDatesContainer = function(event_id){
var cfg = Config;
cfg.method = 'POST';
var dialogOptions = {};
var params = {};
params.configs = 'migxcalendar_loadcontainer';
params.action = 'mgr/migxdb/process';
params.processaction = 'loadcontainer';
params.object_id = event_id;
//params.original_request_uri = request_uri;
//params.data = data;
var ajaxConfig = UiDialog.preparePostParams(cfg, params);
ajaxConfig.data = {
//data: data
};
$http(ajaxConfig).success(function(response, status, header, config) {
if (response){
var success = response.success || false;
var message = response.message || '';
if (success && response.object) {
data = {};
data.item = response.object;
$scope.setDatesContainer(data);
} else {
alert(message);
return;
}
}
//$('#calendar').fullCalendar( 'refetchEvents' );
}).error(function(data, status, header, config) {
//UiDialog.error(data, status, header, config);
});
}
$scope.setDatesContainer = function(data){
$scope.date_containers = $scope.date_containers || {};
if (typeof(data.item) != 'undefined'){
$scope.date_containers['dc_' + data.item.id] = data.item;
setTimeout(function(){
$scope.$apply();
//style="color:;background-color:;"
var color = data.item.Category_textColor && data.item.Category_textColor != '' ? data.item.Category_textColor : '#FFFFFF';
var background_color = data.item.Category_backgroundColor && data.item.Category_backgroundColor != '' ? data.item.Category_backgroundColor : '#3A87AD';
$('#datecontainer'+data.item.id).css({
'color' : color,
'background-color' : background_color
}).draggable({
zIndex: 999,
revert: true, // immediately snap back to original position
revertDuration: 0 //
});
},100);
}
return;
}
}
</script>
<script type="text/javascript" src="assets/components/migxcalendars/js/lib/moment.min.js"></script>
<script type="text/javascript" src="assets/components/migxcalendars/js/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="assets/components/migxcalendars/js/fullcalendar/lang/de.js"></script>
<script>
$(document).ready(function() {
var migxcal_categories = {};
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
lang: 'en',
editable: 1,
events: {
url: 'migxcalajax.html',
data: function() {
return {categories:migxcal_categories};
},
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
, eventResize: function(event, revertFunc) {
migxcalController.eventResize(event,revertFunc);
},
eventDrop: function(event, revertFunc,jsEvent, ui, view) {
migxcalController.eventDrop(event,revertFunc,jsEvent, ui, view);
},
eventDragStart: function(event, jsEvent, ui, view) {
migxcal_dragstart_day = event.start.dayOfYear();
migxcal_dragstart_week = event.start.isoWeek();
},
droppable: true,
drop: function(moment, e ) {
var el = $(e.target);
var event = {
start : moment,
data : el.data()
}
migxcalController.eventDropNew(event,el);
},
eventAfterAllRender: function(view){
migxcalController.hidePleaseWait();
},
eventRender: function(event, element) {
element.popover({
content: event.popupmenu,
html: true,
placement: 'top'
});
element.on('show.bs.popover',function(){
//hide all other popovers
$('.popover').css({display:'none'});
$('.fc-event').popover('hide');
});
element.on('shown.bs.popover',function(){
$('.event-button').click(function() {
var data = $(this).data();
var action = data.action;
if (action == 'edit'){
migxcalController.eventEdit(data);
}
if (action == 'publish'){
migxcalController.eventPublish(data);
}
if (action == 'unpublish'){
migxcalController.eventPublish(data);
}
if (action == 'loadcontainer'){
if (data.eventid){
migxcalController.loadDatesContainer(data.eventid);
}
}
});
});
}
});
$('.migxcal_category').click(function(){
var el = $(this);
var id = el.data().id;
el.toggleClass('selected');
if (el.hasClass('selected')){
migxcal_categories['c_' + id] = id;
}
else{
migxcal_categories['c_' + id] = 0;
}
$('#calendar').fullCalendar( 'refetchEvents' );
});
});
</script>
</body>
</html>