How to delete all fullcalendar events upon month button press?
After failing to find a way to hide ONLY events on calendar, I was thinking about deleting all events once the user clicks the "month" button. How would I implement that?`
$scope.uiConfig = {
calendar: {
height: 450,
editable: false,
selectable: true,
header: {
left: 'title',
center: '',
right: 'month today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.alertOnDateClick,
timeClick: $scope.alertTest
}
};
Here is the function of the month button, I THINK. This is located in fullcalendar.js
var MonthView = BasicView.extend({
// Produces information about what range to display
computeRange: function(date) {
var range = BasicView.prototype.computeRange.call(this, date); // get value from super-method
var rowCnt;
// ensure 6 weeks
if (this.isFixedWeeks()) {
rowCnt = Math.ceil(range.end.diff(range.start, 'weeks', true)); // could be partial weeks due to hiddenDays
range.end.add(6 - rowCnt, 'weeks');
}
return range;
},
// Overrides the default BasicView behavior to have special multi-week auto-height logic
setGridHeight: function(height, isAuto) {
isAuto = isAuto || this.opt('weekMode') === 'variable'; // LEGACY: weekMode is deprecated
// if auto, make the height of each row the height that it would be if there were 6 weeks
if (isAuto) {
height *= this.rowCnt / 6;
}
distributeHeight(this.dayGrid.rowEls, height, !isAuto); // if auto, don't compensate for height-hogging rows
},
isFixedWeeks: function() {
var weekMode = this.opt('weekMode'); // LEGACY: weekMode is deprecated
if (weekMode) {
return weekMode === 'fixed'; // if any other type of weekMode, assume NOT fixed
}
return this.opt('fixedWeekCount');
}});`
This is what I have. I generate events upon clicking a day but I would like to erase all events when I go back to the month view(clicking the month button)
$scope.alertOnDateClick = function(date, jsEvent, view, start, end, allDay){
//dateSaver = $scope.alertMessage = ('Clicked on: ' + date.format());
dateSaver = date.format();
var today = moment();
var todayCheck = moment(today).format('YYYY-MM-DD');
var selectionStart = date.format();
selectionStart = Date.parse(selectionStart);
today = Date.parse(today);
var view = $('#myCalendar1').fullCalendar('getView');
//alert(dateSaver);
$scope.alertMessage = dateSaver;
dayClicked = dateSaver.substring(8,11);
dayClicked = parseInt(dayClicked);
monthClicked = dateSaver.substring(5,7);
monthClicked = parseInt(monthClicked) - 1;
yearClicked = dateSaver.substring(0,4);
yearClicked = parseInt(yearClicked);
if(dateSaver == todayCheck || selectionStart > today){
$('#myCalendar1').fullCalendar( 'changeView', 'agendaDay' );
$('#myCalendar1').fullCalendar( 'gotoDate', date.format());
//$http.post
for(timeIncrement = 0; timeIncrement < 24; timeIncrement++){
$scope.events.push({
title: 'Rooms Available [' + 11 + ']',
start: new Date(yearClicked, monthClicked, dayClicked, timeIncrement),
url: 'http://localhost:8000/app/reservationOptions.html'
});
}
}
else{
//if(view.name == 'month'){
alert("You have clicked a previous date");
//}
//else{
// alert("You have clicked a previous time slot");
//}
}
};
I think the part that you are looking for is the $('#').fullCalendar('removeEventSource', ); part that can be secified in the viewRender: option Like the first tutorial I read mentions this was his hardest part at http://www.codeproject.com/Articles/638674/Full-calendar-A-complete-web-diary-system-for-jQue
see my entire javascript code below -- works for me! Thanks FullCalendar
<script type="text/javascript">
var DirUpdateComplete = false;
var DeptUpdateComplete = false;
$(document).ready(function () {
$("#LegendLink").click(function () {
$('#LegendRow').toggle('slow');
});
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
var hid = $('#heid').val();
var isMors = $('#isMors').val();
var isAdmin = $('#isAdmin').val();
var _now = new Date();
// now.format("dd/M/yy h:mm tt");
// now = getDate();
var _end = new Date(_now);
_end = addDays(_now, 30);
var num = 30;
var holdDat = {
SDay: _now,
eid: hid,
numOfDays: num
};
var objectData = {
eid: hid
};
var sourceUserView = {
url: 'Schedule/GetSchedule',
data: objectData
};
var narray = ["Jarose, Justin", "Nelson, Rusty"];
var CalLoading = true;
//https://github.com/mherrmann/fullcalendar-rightclick/blob/master/README.md
//add something for easy adding a week at atime, or the
//http://fullcalendar.io/docs/selection/
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
events: sourceUserView,
eventClick: function (calEvent, jsEvent, view) {
DisplayCurrentEvent(calEvent);
},
select: function (start, end, jsEvent, view) {
if (isMors == "True") {
newScheduleRange(start, end, jsEvent, view);
}
//alert("will i get here");
},
eventDrop: function (event, dayDelta, revertFunc, jsEvent, ui, view) {
var hd = new Date();
var movedToDate = new Date(event.start._d);
if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
if (isAdmin) {
MoveEvent(event);
} else {
if (movedToDate <= hd) {
revertFunc();
alert("Can not move anything to earlier then Tomorrow.");
} else {
if (confirm("Confirm move?")) {
MoveEvent(event);
} else {
revertFunc();
}
}
}
} else {
alert("You can only adjust your own items.");
revertFunc();
}
},
eventRightclick: function (event, jsEvent, view) {
if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
EventRightClicked(event);
}
//alert('an event has been rightclicked!');
// Prevent browser context menu:
return false;
},
eventResize: function (event, delta, revertFunc) {
if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
var hd = new Date();
var nDate = new Date(event.start._d);
if (isAdmin) {
UpdateEvent(event.id, event.start, event.end);
} else {
if (nDate <= hd) {
revertFunc();
alert("Can not adjust Today or past dates.");
} else {
UpdateEvent(event.id, event.start, event.end);
}
}
} else {
revertFunc();
}
if (event.MorsRecID != $('#HiddenMorsRecID').val() && isAdmin != "True") {
alert("You can only adjust your own items.");
}
},
dayClick: function (date, allDay, jsEvent, view) {
if (isMors == "True") {
ShowEventPopup(date);
var d = date;
var sd = moment(d).format('L');
$('#StartDate').val(sd);
}
},
viewRender: function (view, element) {
if (!CalLoading) {
$('#calendar').fullCalendar('removeEventSource', sourceUserView);
if ($('#ShowMine').is(':checked')) {
$('#calendar').fullCalendar('addEventSource', sourceUserView);
}
CombineLists();
}
}
});
// page is now ready, initialize the calendar...
CalLoading = false;
//88888888888888888888888888888888888888888888888888888888888888888***************
function newScheduleRange(start, end, jsEvent, view) {
var spanStartDate = start._d.toLocaleDateString();
if (view.name == 'month') {
spanStartDate = moment(spanStartDate, 'MM/DD/YYYY').add('days', 1).format('MM/DD/YYYY');
} else {
spanStartDate = moment(spanStartDate, 'MM/DD/YYYY').format('MM/DD/YYYY');
}
var spanEndDate = end._d.toLocaleDateString();
spanEndDate = moment(spanEndDate, 'MM/DD/YYYY').format('MM/DD/YYYY');
if (spanStartDate != spanEndDate && spanStartDate < spanEndDate) {
var hd = new Date();
var realDate = new Date(spanStartDate);
if (realDate <= hd) {
alert("Choose a start date greater then Today.");
} else {
$('#popupNewSpanForm').modal('show');
$('#SpanStartHour').focus();
//alert("The start is: " + spanStartDate);
//alert("The end is: " + spanEndDate);
$('#SpanStartDate').val(spanStartDate);
$('#SpanEndDate').val(spanEndDate);
}
}
}
//88888888888888888888888888888888888888888888888888888888888888888***************
//save span
$('#btnSpanPopupSave').click(function() {
$('#popupNewSpanForm').modal('hide');
$('#popupWait').modal('show');
var holdstart = $('#SpanStartDate').val() + " " + $('#SpanStartHour').val() + ":" + $('#SpanStartMinutes').val();
var holdend = $('#SpanStartDate').val() + " " + $('#SpanEndHour').val() + ":" + $('#SpanEndMinutes').val();
var dataRow = {
'MorsRecID': $('#HiddenSpanMorsRecID').val(),
'start': holdstart,
'end': holdend,
'className': $('#SpanclassType').val(),
'spanstart': $('#SpanStartDate').val(),
'spanend': $('#SpanEndDate').val()
}
SendNewSpan(dataRow);
$('#popupWait').modal('hide');
});
//88888888888888888888888888888888888888888888888888888888888888888***************
function SendNewSpan(dat) {
$.ajax({
type: 'POST',
url: "Schedule/NewScheduleSpan",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(dat),
success: function (response, textStatus, xhr) {
if (xhr.status == 200) {
$('#calendar').fullCalendar('refetchEvents');
//alert('New Schedule saved!');
} else {
alert('Error, could not copy schedule!');
}
}
});
}
//88888888888888888888888888888888888888888888888888888888888888888***************
//save new event
$('#btnPopupSave').click(function () {
$('#popupEventForm').modal('hide');
$('#popupWait').modal('show');
var holdstart = $('#StartDate').val() + " " + $('#StartHour').val() + ":" + $('#StartMinutes').val();
var holdend = $('#StartDate').val() + " " + $('#EndHour').val() + ":" + $('#EndMinutes').val();
var dataRow = {
'Title': $('#eventTitle').val(),
'MorsRecID': $('#HiddenMorsRecID').val(),
'StartTime': holdstart,
'EndTime': holdend,
'ClassType': $('#classType').val()
}
$.ajax({
type: 'POST',
url: "Schedule/NewSchedule",
data: dataRow,
success: function (response, textStatus, xhr) {
if (xhr.status == 200) {
$('#calendar').fullCalendar('refetchEvents');
$('#popupWait').modal('hide');
//alert('New Schedule saved!');
} else {
$('#popupWait').modal('hide');
alert('Error, could not save schedule!');
}
}
});
ClearPopupFormValues();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#btnDisplaySave').click(function () {
$('#popupEventDisplayForm').modal('hide');
$('#popupWait').modal('show');
var holdstart = $('#DisplayStartDate').val() + " " + $('#DisplayStartHour').val() + ":" + $('#DisplayStartMinutes').val();
var holdend = $('#DisplayStartDate').val() + " " + $('#DisplayEndHour').val() + ":" + $('#DisplayEndMinutes').val();
var dataRow = {
'SchRecID': $('#DisplayEventID').val(),
'StartTime': holdstart,
'EndTime': holdend,
'ClassType': $('#DisplayclassType').val()
}
UpdateEventAll(dataRow);
$('#calendar').fullCalendar('refetchEvents');
$('#popupWait').modal('hide');
});
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#btnDisplayCopySave').click(function () {
$('#popupEventCopyForm').modal('hide');
$('#popupWait').modal('show');
var holdstart = $('#CopyNewDate').val() + " " + $('#DisplayCopyStartHour').val() + ":" + $('#DisplayCopyStartMinutes').val();
var holdend = $('#CopyNewDate').val() + " " + $('#DisplayCopyEndHour').val() + ":" + $('#DisplayCopyEndMinutes').val();
var dataRow = {
'MorsRecID': $('#DisplayCopyMorsRecID').val(),
'StartTime': holdstart,
'EndTime': holdend,
'ClassType': $('#DisplayCopyclassType').val()
}
CopyEvent(dataRow);
$('#calendar').fullCalendar('refetchEvents');
$('#popupWait').modal('hide');
});
//88888888888888888888888888888888888888888888888888888888888888888***************
//dept list
$('#btnDeptLst').click(function() {
CombineLists();
// FormDeptList();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
//btnDirLst
$('#btnDirLst').click(function () {
CombineLists();
//FormDirList();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#ShowMine').click(function () {
$('#popupWait').modal('show');
if ($(this).is(':checked')) {
$('#calendar').fullCalendar('addEventSource', sourceUserView);
} else {
$('#calendar').fullCalendar('removeEventSource', sourceUserView);
}
$('#popupWait').modal('hide');
});
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#ShowMOD').click(function () {
if ($(this).is(':checked')) {
viewMOD();
} else {
$('#popupWait').modal('show');
var sourceMODView = {
url: 'Schedule/GetMODSched',
success: function() {
$('#popupWait').modal('hide');
},
error: function () {
$('#popupWait').modal('hide');
alert("An error occurred while updating");
}
};
$('#calendar').fullCalendar('removeEventSource', sourceMODView);
$('#popupWait').modal('hide');
}
});
//88888888888888888888888888888888888888888888888888888888888888888***************
function CombineLists() {
$('#popupWait').modal('show');
DirUpdateComplete = false;
DeptUpdateComplete = false;
FormDirList();
FormDeptList();
}
//88888888888888888888888888888888888888888888888888888888888888888***************
$("#dirLstArea input[type=checkbox]").click(function() {
CombineLists();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
$("#DeptListArea input[type=checkbox]").click(function() {
CombineLists();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
function FormDirList() {
var ed = false;
if (isAdmin == "True") {
ed = true;
}
var harray = [];
$("#dirLstArea input[type=checkbox]").each(function () {
if ($(this).is(":checked")) {
harray.push($(this).val());
}
});
var dirList = {
Names: harray
};
// var Names = ["Smith, Justin", "Barnard, Rusty"];
var sourceDirView = {
url: 'Schedule/GetSchedbyDir',
traditional: true,
data: dirList,
editable: ed,
success: function() {
DirUpdateComplete = true;
CloseWait();
},
error: function () {
DirUpdateComplete = true;
CloseWait();
alert("An error occurred while Updating.");
}
};
$('#calendar').fullCalendar('removeEventSource', sourceDirView);
$('#calendar').fullCalendar('addEventSource', sourceDirView);
}
//88888888888888888888888888888888888888888888888888888888888888888***************
function FormDeptList() {
var ed = false;
if (isAdmin == "True") {
ed = true;
}
var harray = [];
$("#DeptListArea input[type=checkbox]").each(function () {
if ($(this).is(":checked")) {
harray.push($(this).val());
}
});
var dirList = {
Names: harray
};
// var Names = ["Jarose, Justin", "Nelson, Rusty"];
var sourceDepartmentView = {
url: 'Schedule/GetSchedbyDept',
traditional: true,
data: dirList,
editable: ed,
success: function() {
DeptUpdateComplete = true;
CloseWait();
},
error: function () {
DeptUpdateComplete = true;
CloseWait();
alert("An error occurred while Updating.");
//$('#popupWait').modal('hide');
}
};
$('#calendar').fullCalendar('removeEventSource', sourceDepartmentView);
$('#calendar').fullCalendar('addEventSource', sourceDepartmentView);
}
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#AllDeparts').click(function () {
if ($(this).val() == "All") {
$(this).val("None");
$("#DeptListArea input[type=checkbox]").each(function () {
$(this).prop('checked', true);
});
} else {
$(this).val("All");
$("#DeptListArea input[type=checkbox]").each(function () {
$(this).prop('checked', false);
});
}
CombineLists();
//FormDeptList();
});
//88888888888888888888888888888888888888888888888888888888888888888***************
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#AllDirectors').click( function () {
if ($(this).val() == "All") {
$(this).val("None");
$("#dirLstArea input[type=checkbox]").each(function() {
$(this).prop('checked', true);
});
} else {
$(this).val("All");
$("#dirLstArea input[type=checkbox]").each(function () {
$(this).prop('checked', false);
});
}
CombineLists();
//FormDirList();
}
);
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#deleteItem').click(function() {
if (confirm("Do you really want to Delete this Schedule?")) {
DeleteRecord();
}
});
//88888888888888888888888888888888888888888888888888888888888888888***************
function DeleteRecord() {
var dataRow = {
'SchRecID': $('#DisplayEventID').val()
}
DeleteOneEvent(dataRow);
}
//88888888888888888888888888888888888888888888888888888888888888888***************
//ViewMOD
function viewMOD() {
$('#popupWait').modal('show');
var sourceMODView = {
url: 'Schedule/GetMODSched',
success: function () {
$('#popupWait').modal('hide');
},
error: function () {
$('#popupWait').modal('hide');
alert("An error occurred while updating");
}
};
$('#calendar').fullCalendar('addEventSource', sourceMODView);
}
//88888888888888888888888888888888888888888888888888888888888888888***************
function CloseWait() {
if (DirUpdateComplete && DeptUpdateComplete) {
$('#popupWait').modal('hide');
}
}
});//end of doc ready
//88888888888888888888888888888888888888888888888888888888888888888***************
$('#btnPopupCancel').click(function () {
ClearPopupFormValues();
$('#popupEventForm').modal('hide');
});//88888888888888888888888888888888888888888888888888888888888888888***************
function ShowEventPopup(date) {
ClearPopupFormValues();
//$('#popupEventForm').toggleClass('hidden');
var hd = new Date();
if (date > hd) {
$('#popupEventForm').modal('show');
$('#popupDisplayHeader').text("Enter New Schedule");
$('#StartDate').focus();
} else {
alert("Can not create a schedule for Today or earlier.");
}
}
//88888888888888888888888888888888888888888888888888888888888888888***************
function EventRightClicked(event) {
if (isAdmin == "True" || event.MorsRecID == $('#HiddenMorsRecID').val()) {
$('#popupEventCopyForm').modal('show');
$('#btnDisplayCopySave').focus();
$('#DisplayCopyMorsRecID').val(event.MorsRecID);
$('#TBDispalyCopyMorsName').val(event.MorsName);
var hsd = new moment(event.start._i);
var hed = new moment(event.end._i);
$('#DisplayCopyStartDate').val(hsd.format("MM/DD/YYYY"));
$('#DisplayCopyStartHour').val(hsd.format("HH"));
$('#DisplayCopyStartMinutes').val(hsd.format("mm"));
$('#DisplayCopyEndHour').val(hed.format("HH"));
$('#DisplayCopyEndMinutes').val(hed.format("mm"));
$('#DisplayCopyclassType').val(event.className);
var htm = moment(hsd, 'MM/DD/YYYY').add('days', 1).format('MM/DD/YYYY');
$('#CopyNewDate').val(htm);
}
}
Modify your eventRender callback:
eventRender:function(event, element, view)
if( /* shall show the event */ ){
return event;
}
else {
return false;
}
},
have a look at this: http://fullcalendar.io/docs/event_rendering/eventRender/
(last) edit
eventRender:function(event, element, view)
if( view.name == "agendaDay" ){
return event;
}
else {
return false;
}
},
... RTM
链接地址: http://www.djcxy.com/p/81164.html