We Keep Coding

Full calendar not display correct date time in week and day view

I have this full calendar code
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: baseUrl+"events",
dataType: 'json',
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
description: "Start time :"+$(this).attr('start')+"End Time:"+$(this).attr('end'),
start: $(this).attr('start'),
end_time: $(this).attr('end'),
});
});
callback(events);
}
});
}, eventRender: function(eventObj, $el) {
var startDate = moment(eventObj.start).format('DD MMM, Y hh:mm A');
var endDate = eventObj.end_time ? moment(eventObj.end_time).format('DD MMM,Y hh:mm A') : '-';
var contentsHtml = '<div class="t2f_popover_event"><ul>';
contentsHtml = contentsHtml+ '<li> <b>Start Time: </b>'+ startDate+'</li><li> <b>End Time: </b>'+endDate+'</li><li><b>Event Type:</b>'+(' Working hours')+'</li>';
'</ul> </div>';
$el.popover({
title: '<div style="color:#fff; text-transform:capitalize;font-weight: 600;padding:5px;">'+eventObj.title+'</div>',
content: eventObj.description,
trigger: 'manual',
placement: 'left',
container: 'body',
content: contentsHtml,
html: true
}).on("mouseenter", function () {
...
...
});
},
eventOverlap : false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
changeView : 'agendaDay',
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
selectConstraint: {
start: jQuery.fullCalendar.moment().subtract(1, 'days'),
end: jQuery.fullCalendar.moment().startOf('month').add(1, 'month')
},
displayEventTime: false,
disableDragging: true,
editable: false,
eventLimit: true,
});
});
Start time is - 2022-12-03T01:00:00 i.e 1:00 AM
End time is - 2022-12-03T11:59:00 i.e 11:59 AM
but on calendar time is not proper of each event.
it should be from 1:00 AM to 11:59 AM but in calendar event start from 1:00 AM.
Any Solution to fix this issue. Thanks

Drag and drop full calendar doesn't fire php script

Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated successfully");}
});
}
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>

Set a jquery date picker to select a particular date range

I have 2 fields, DateFrom and DateTo, and a jquery date picker. If today is the 9th of February, I want the DateFrom field to show 01-Jan-2017 and the DateTo field to show 31-Jan-2017. How can I achieve that in this particular context ?
$(document).ready(function () {
$("#ddlDocument").change(function () {
$.ajax({
type: "POST",
url: serviceName + "/GetMIRReportValueAdmin",
data: "{'Value':'" + $(this).val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
processdata: true,
success: function (msg) {
var data = msg.d;
$('#infocontent-body').hide();
$('#divParams').html(data);
$('.date').datepicker({ constrainInput: true, duration: 'fast', gotoCurrent: true, dateFormat: 'd-M-yy', autoSize: true, showOn: 'focus',
changeMonth: true, changeYear: true, buttonImageOnly: true, buttonImage: baseUrl + 'Styles/Images/datepicker.gif',
minDate: new Date(curryear, 1, 1), maxDate: '+15y', yearRange: '1990:2030',
beforeShow: function (input, inst) { $(this).blur(); }
});
ProductList(); //If there is a product list
StatusList(); //If there is a status list
if ($("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Early Withdrawal Report") {
GetLifeCompanyList(); //If there is a fund list
$("#ddllifecompany").removeAttr('disabled');
}
else FinancialProductList(); //If there is a financial product list
//FundList(); //If there is a fund list
CompanyList(); //If there is a company List example RA and nonRA
if ($("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Investment Statement" || $("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Growth Report"
|| $("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Actuaries Report") {
ProductFundList(); //If there is a fund list
GetLifeCompanyList(); //If there is a fund list
$("#ddllifecompany").removeAttr('disabled');
}
},
error: function (msg) {
alert('Failed to load the requested data.');
}
});
});
});

How about something like this?
var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDay = new Date(y, m-1, 1);
var lastDay = new Date(y, m-1 + 1, 0);
$( ".selector" ).datepicker( "setDate", firstDay );
$( ".selector" ).datepicker( "setDate", lastDay );

Bootstrap - datesDisabled array of dates and Sunday & Saturday

I want to disable array of dates and sunday and saturday.. My array of dates work perfect, but business logic need to disable sunday and saturday.. How to do this?
This is my code for array of dates:
function checkDateFromForEvent() {
var datesForDisable = new Array();
var clientContext = new SP.ClientContext.get_current();
var eventsList = clientContext.get_web().get_lists().getByTitle("Events");
var camlCheckQry = new SP.CamlQuery.createAllItemsQuery();
var items = eventsList.getItems(camlCheckQry);
clientContext.load(items, "Include(EventDate)");
clientContext.executeQueryAsync(successHandler, errorHandler);
function successHandler() {
if (items.get_count() > 0) {
var iEnum = items.getEnumerator();
while (iEnum.moveNext()) {
var item = iEnum.get_current();
datesForDisable.push(moment(item.get_item("EventDate")).format("DD-MM-YYYY"))
}
}
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable
})
I want to insert in datesDisable paremeter, sunday and saturday..

You can use beforeShowDay hook
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6],
beforeShowDay:function(currentDate){
var dayNr = currentDate.getDay();
if (dayNr==0 || dayNr==6){//you can condition this with your own logic
return false;
}
return true;
}
});

Use daysOfWeekDisabled: [0,6]
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6]
})
Demo here

FullCalendar.io timeformat not working with eventsources

I'm using the calendar plugin fullcalendar . Now I want to show my date from my activities in format H(:mm)" but my code isn't working for some reason.
My code is in c#.
I've used this javascript code to get it working.
$('#calendar').fullCalendar({
header: {
left: 'prev,title,next',
right: 'today,basicDay,basicWeek,month'
},
lang: 'nl',
defaultDate: new Date(),
eventLimit: true, // allow "more" link when too many events
fixedWeekCount :false,
eventSources: [
{
url: '/Groups/GetActivities',
type: 'GET',
data: {
startdate: "2014-12-01",
enddate: "2014-12-31",
groupid: #Model.Group.Id,
},
allDay:false,
timeFormat:"h:mm",
color: '#EAE9E0'
}
]
});
I've read the documentation about timeformat here.
My request returns data in this format:
[{"title":"Bergmonicursus - Val d\u0027anniviers","start":"2015-01-03T12:00:00","end":"2015-02-03T08:00:00","url":"/activities/95/detail?groupid=156","allDay":false}]
Can someone please explain to me what I'm doing wrong. My end result of the activity has 12 as hour format and not 12:00 or 12:30 if I hardcode it.

timeFormat is a top level property in the fullcalendar options object. It can't be an event property.
So put it here
$('#calendar').fullCalendar({
header: {
left: 'prev,title,next',
right: 'today,basicDay,basicWeek,month'
},
lang: 'nl',
defaultDate: new Date(),
eventLimit: true, // allow "more" link when too many events
fixedWeekCount :false,
eventSources: [
{
url: '/Groups/GetActivities',
type: 'GET',
data: {
startdate: "2014-12-01",
enddate: "2014-12-31",
groupid: #Model.Group.Id,
},
allDay:false,
//timeFormat:"h:mm", // X--- Not here
color: '#EAE9E0'
}
],
timeFormat:"h:mm", // <---- Here
});
And if you need to change on a event to event basis, you have to use eventRender. (and do it manually).