I would like to know, if there is any way to create a calendar with FullCalendar in such format:
I formed resusers in the form of dates. But I see events only in one day. It is possible to correct the events. But maybe there is a way to display all the days in this format.
Thank you in advance!
Temporarily, I solved the problem this way:
<div class="panel-body">
<div id="calendar"></div>
</div>
#section Styles {
<link href="~/lib/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="~/lib/fullcalendar-scheduler/dist/scheduler.min.css" rel="stylesheet" />
}
#section Scripts {
<script src="~/lib/moment/moment.js"></script>
<script src="~/lib/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="~/lib/fullcalendar/dist/locale/ru.js"></script>
<script src="~/lib/fullcalendar-scheduler/dist/scheduler.min.js"></script>
<script>
$(function () {
$('#calendar').fullCalendar({
defaultView: 'timelineDay',
slotDuration: '00:30',
slotWidth: 5,
height: 'auto',
eventOverlap: false,
nowIndicator: true,
businessHours: true,
defaultDate: "#DateTime.Now.ToString("yyyy-MM")-01",
titleFormat: 'MMMM YYYY',
header: {
left: 'myPrevButton,myNextButton',
center: 'title',
right: ''
},
customButtons: {
myNextButton: {
//text: 'Next',
icon: 'right-single-arrow',
click: function () {
$('#calendar').fullCalendar('incrementDate', {
months: 1,
});
$('#calendar').fullCalendar('refetchResources');
}
},
myPrevButton: {
//text: 'Prev',
icon: 'left-single-arrow',
click: function () {
$('#calendar').fullCalendar('incrementDate', {
months: -1,
});
$('#calendar').fullCalendar('refetchResources');
}
}
},
events: "/api/Sheduling/eventpersonal/#Model.Id",
refetchResourcesOnNavigate: true,
resources: '/api/Sheduling/1'
});
});
</script>
}
This solution works for me. But it requires superfluous operations.
This solution works for me. But it requires superfluous operations. I receive a schedule for one employee in the form of:
Resources:
[{"id":1,"title":"1/8"},{"id":2,"title":"2/8"},{"id":3,"title":"3/8"},{"id":4,"title":"4/8"},{"id":5,"title":"5/8"},{"id":6,"title":"6/8"}, ....
Events (where all start in the end date is the 1st day of the month, and the resourceId is the date of the month):
[{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T10:05:00","end":"2018-08-01T10:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T10:35:00","end":"2018-08-01T10:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T11:05:00","end":"2018-08-01T11:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T11:35:00","end":"2018-08-01T11:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T12:05:00","end":"2018-08-01T12:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T12:35:00","end":"2018-08-01T12:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T13:05:00","end":"2018-08-01T13:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T13:35:00","end":"2018-08-01T13:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T14:05:00","end":"2018-08-01T14:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T14:35:00","end":"2018-08-01T14:39:50"}, ....
Related
I am trying full calendar for the first time on an ASP.NET MVC page. for the timezone, I have tried using 'local', 'America/Chicago'( as well as America/New_York and America/Los_Angeles) and variations of UTC all to no avail. When it has timezone: 'local' every event will show 2 hours after the start of each event, so an event at 11am will say 1pm. UTC is worse it is 8 hours off then. How do I fix this??
Here is the code
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<script>
$(document).ready(function () {
$('#coverage').click(function () {
$('#Map').show();
});
$('#close').click(function () {
$('#Map').hide();
});
var events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
$.each(data, function (i, evt) {
events.push({
title: evt.Title,
start: evt.Start,
id: evt.ID
});
});
GenerateCalendar(events);
}
});
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
theme: true,
timezone: 'local',
editable: false,
defaultDate: '#Convert.ToDateTime(ViewBag.EventDate).ToShortDateString() ',
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: events,
eventClick: function (calEvent) {
window.location = '/MonthlyEvents/Details/' + calEvent.id;
}
});
}
});
</script>
$(document).ready(function () {
$.datepicker.setDefaults($.datepicker.regional["en"]);
// $('.datepicker').datepicker({ dateFormat: 'dd-mm-yyyy' });
$(':input.datepicker').datepicker({ dateFormat: 'yyyy-mm-dd' });
$("form[id*=frmUpdateCalendar").validationEngine();
//Initialisations
initialize_Calendar();
});
/* Initialize external events
-----------------------------------------------------------------*/
function initialize_external_event(selector) {
//initialize booking types
$(selector).each(function () {
//Make draggable
$(this).draggable({
revert: true,
revertDuration: 0,
zIndex: 999,
cursorAt: {
left: 10,
top: 1
}
});
//Create event object
var event_object = {
title: $.trim($(this).text())
};
//Store event in dom to be accessed later
$(this).data('eventObject', event_object);
});
}
/* initialize the calendar
-----------------------------------------------------------------*/
function initialize_Calendar() {
$("div[id*=HolidaysCalendar]").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month"
//right: "month,agendaWeek,agendaDay"
},
firstDay: 1,
editable: false,
droppable: false,
selectable: true,
selectHelper: true,
events: "JsonResponse.ashx",
eventRender: function (calEvent, element, monthView) {
element.attr('title', calEvent.description);
},
dayClick: function (date, allDay, jsEvent, view) {
},
eventClick: dialogUpdateEvent,
eventDrop: function (calEvent, dayDelta, minuteDelta, allDay,
revertFunc, jsEvent, ui, view) {
},
eventResize: function (calEvent, dayDelta, minuteDelta, revertFunc) {
}
});
//initialize external events
initialize_external_event('.external-event');
}
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/moment.min.js"></script>
<script type="text/javascript" src="<%= live_site %>/Scripts/js/plugins/fullcalendar/fullcalendar.min.js"></script>
i'am using asp.net with aspx page, I keep getting this problem :
TypeError: $(...).fullCalendar is not a function
$("div[id*=HolidaysCalendar]").fullCalendar();
So it basically doesn't know much about fullCalendar.
I would like to delete events on a fullcalendar jquery plugin by dragging them to a trash can image and dropping them in. There are several posts that discuss this action but I can't seem to get mine to work.
The trash can image is defined in the cshtml below:
<div class="well well-sm" id="deleteEventsDiv" style="text-align:center">
<label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label>
<img src="~/Images/cal-trash.png">
<div class="note">
<strong>Note:</strong> Drag and drop events here to delete them
</div>
</div>
I can drag the event to the trash can but it reverts back to its original position then the eventDragStop event is triggered. Since it is not over the trash can, the rest of the code is not run. This is my fullcalendar code:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
selectable: true,
selectHelper: true,
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required. So, you can't add events over a year away from the current date
eventConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
resizable: true,
dragRevertDuration: 0,
eventDragStop: function (event, jsEvent, ui, view) {
alert('event drag stopped...should be over trash can.');
// This condition makes it easier to test if the event is over the trash can using Jquery
if ($('div#deleteEventsDiv').is(':hover')) {
// Confirmation popup
$.SmartMessageBox({
title: "Delete Event?",
content: 'Are you sure you want to remove this event from the calender?',
buttons: '[No][Yes]'
}, function (ButtonPressed) {
if (ButtonPressed === "Yes") {
// You can change the URL and other details to your liking.
// On success a small box notification will fire
$.ajax({
url: '/events/' + event.id,
type: 'DELETE',
success: function (request) {
$.smallBox({
title: "Deleting Event",
content: "Event Deleted",
color: "#659265",
iconSmall: "fa fa-check fa-2x fadeInRight animated",
timeout: 4000
});
$('#edit_calendar').fullCalendar('removeEvents', event.id);
}
});
}
});
}
}
}); //end calendar initialization
How do I get the event from NOT returning to its original position when it is over the trash can?
i had same problem here. And i found a paleative solution.
I hope that it works for you too.
Open fullcalendar.js and edit:
dragRevertDuration: 500
to
dragRevertDuration: 0
When I click on my button the series briefly disappears then the screen appears to refresh then the whole chart disappears, am I missing something simple. Please see the code below
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line' ,
zoomType: 'x'
},
xAxis: { type: 'datetime',
labels: {
formatter: function () {return Highcharts.dateFormat('%e/%m/%Y <br/> %H:%M:%S', this.value);
}
},
tickmarkPlacement: 'on',
gridLineWidth: 1
},
yAxis: {
title: {
text: engUnit,
}
},
series: [{
name: userID,
data: <%= chartData%>
},
{
name: 'High Alarm Value',
data: <%= chartDataMax%>
},
{
name: 'Low Alarm Value',
data: <%= chartDataMin%>
}
]
});
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function () {
var series = chart.series[1];
var series1 = chart.series[2];
if (series.visible) {
series.hide();
series1.hide();
$button.html('Show series');
} else {
series.show();
series1.show();
$button.html('Hide series');
}
});
});
</script>
the part where i display my chart on the screen using a master page
<button id="button" class="autocompare">Hide series</button>
<div id="container" style="height: 376px; width: 880px; position: relative; left: 4px; margin-top: -210px; top: 231px;" >
</div>
I was obviously having a bad day last week. The reason it was disappearing was due to postback on a control I am using to select a date.
Once I click the show/hide button, the button posts back and causes the screen to refresh.
How can I show a description of Events in fullcalendar?
I have events that have a title and a description.
So how can I show the description?
When you add the title and description it will concatenate.
Using the below code, you can concatenate with the title:
eventRender: function (event, element, view) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},
Here is the working jQuery or JavaScript code.
I love Bootbox.js for showing message so I implemented that also here:
$(document).ready(function() {
var today_date = moment().format('YYYY-MM-DD');
console.log(today_date);
// $('#calendar').fullCalendar('gotoDate', today_date);
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
// right: 'month,basicWeek,basicDay'
},
// header: { center: 'month,agendaWeek' }, // Buttons for switching between views
defaultDate: today_date,
businessHours:
{
rendering: 'inverse-background',
dow: [0,1]
},
editable: false,
eventLimit: true, // Allow "more" link when too many events
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
});
});