I use a popup form to add events to the fullcalendar.
When I click on the events I want that popup to show all the data filled in to change or to delete the event.
I succeed in adding all in the textboxes but my formatting of the date and time is wrong.
How can I change the format?
eventClick: function(calEvent, jsEvent, view) {
$("#id").val(calEvent.id);
$("#date").val(calEvent.start);
$("#start").val(calEvent.start);
$("#end").val(calEvent.end);
$("#allday").val(calEvent.allDay);
$("#title").val(calEvent.title);
$("#location").val(calEvent.location);
$("#description").val(calEvent.description);
$("#url").val(calEvent.url);
//open form
$(".modalbox").trigger('click');
}
I get the values as 2013-09-12 14:00:00
So I want to show the date as 2013-09-12 and the start/end-time as 14:00 e.g.
thx
You can use $.fullCalendar.formatDate(from, format); to convert date and time. Some example:
$('#calendar-container').fullCalendar({
eventClick: function(calEvent, jsEvent, view){
var start = $.fullCalendar.formatDate(calEvent._start, 'dd.MM.yyyy HH:mm:ss');
var end = $.fullCalendar.formatDate(calEvent._end, 'dd.MM.yyyy HH:mm:ss');
alert('start: ' + start + '; end: ' + end);
}
});
As of fullcalendar 2.1.1 formatDate no longer seems to be supported.
Happy to mention the integration of moment.js to fullCalendar.
Read Moment.js Documentation, formatting as such:
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 16th 2014, 6:38:44 pm
moment().format('dddd'); // Tuesday
moment().format("MMM Do YY"); // Sep 16th 14
moment().format('YYYY [escaped] YYYY');
Related
FullCalendar 3 listMonth only lists days that have events.
I need to display all days of the month in the listMonth view, and display some text calculation for each end very day in the listMonth view.
How can I force the listMonth view to show all days of the month and pass a custom text to each day rendered?
I would like to use something like dayRender to pass the values to each day rendered using dayRender -
dayRender: function (date, cell){
cell.html("My custom text");
}
But dayRender does not seem to work with the listMonth view.
You can simply generate an array that contains all of the days in-between the selected date listMonth view, to force FullCalendar to show all calendar days:
$start_date = $this->input->post('start');// or however you are getting the start date
$end_date = $this->input->post('end');// or however you are getting the end date
$date_span_Array = array();// init
$temp_Array = array();// init
while(strtotime($start_date) <= strtotime($end_date)){
$temp_Array['title'] = 'Your custom title';
$temp_Array['start'] = $start_date;
$temp_Array['allDay'] = 'true';
$temp_Array['My_Custom_Value_Or_Text'] = 'My Text';
array_push($date_span_Array, $temp_Array);
$start_date = date ("Y-m-d", strtotime("+1 days", strtotime($start_date)));
}
// array of events that span all days between 2 dates for fullCalendar selected view
echo json_encode($date_span_Array);
You can add your own custom data, or actual event data in the creation of that array - as seen above - or afterwards during eventRender
I am Using JQuery DateRangePicker by Dan Grossman, right now I Configured it to enable Current Week's Dates only by momentjs.
Here is my script
var startDate = moment().startOf('week').toDate();
var endDate = moment().endOf('week').toDate();
$(document).ready(function () {
$("#paymentDateTimePicker").daterangepicker({
singleDatePicker: true,
autoUpdateInput: false,
minDate: startDate,
maxDate: endDate,
locale: {
format: 'MM/DD/YYYY',
firstDay: 1
}
});
});
By default, this configuration starts from Sunday to Saturday.
Here is the output.
Now I want to Configure this dateRangePicker to starts on Friday instead of Sunday and ends on Thursday.
OR We can say From 2nd Of OCT to 8th of OCT.
I tried the add() and subtract() Methods of momentjs but can not find a proper solution to this.
Help me with this.
Thanks for your help, Above solution will work on regular days but if Today's Saturday then
it will not work.
here is a possible solution.
var day = moment().day();
var startDate;
var endDate;
if (day >= 5) {
startDate = moment().day(5).toDate();
endDate = moment().day(5).add(6, 'days').toDate()
}
else {
startDate = moment().startOf('week').subtract(2, 'days').toDate();
endDate = moment().endOf('week').subtract(2, 'days').toDate();
}
or can also use Datejs for easy chaining.
You can Modify as the date range from the Week Like This
var startDate = moment().startOf('week').subtract(2,'days').toDate();
var endDate = moment().endOf('week').subtract(2, 'days').toDate();
select: function(start, end) {
var formatStart = start.format();
var formatEnd = end.format();
alert(formatEnd);
showProjModal(formatStart,formatEnd);
},
i choice 2016-08-11 to 2016-08-13,but formatEnd is 2016-08-14,i do not know why?
From the docs at fullcalendar.io.
end is a Moment indicating the end of the selection. It is an exclusive value, so if the selection is all-day, and the last day is a Thursday, end will be Friday.
I guess your selection is all day? So it is working as intended.
You can check this by calling hasTime
Example
if (end.hasTime()) {
// Specific endpoint. For example 2016-07-13 10:00:00'
}
else {
// All day. For example 2016-07-13
// If you want to output the end day you selected here subtract 1 of the day
end.subtract(1, 'days');
}
How do I set the default date to today, using Contact Form 7?
The minimum date can be set easily with min:today. When you click on a datepicker you can choose dates from today.
But the default date (before picking) is not today's date. The date is displayed like 2016/mm/dd or whatever date format.
Yes, I added a script
<script>
jQuery(function ($) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
$('#datePicker').val(today);
$("#datePicker").attr("min", today);
});
</script>
And than call it in:
[date* your-date class:required id:datePicker]
You can also use relative date/time functions supported by the DateTime class. So, adding "today" works to set it as a default date. (Specifying a Date with Relative Date Formats)
[date due-date "today"]
I found:
$(function() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
$('#datePicker').val(today);
$("#datePicker").attr("min", today);
});
Also, Don't Forget to add the library at first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have called it as:
[date* check-in min:today id:datePicker]
You can use min:today without using JavaScript or Jquery functions, see: date field
[date* check-in min-date:today placeholder "Date"]
I want to use fullcalendar with custom date range for ex. it should display view for particular date range like from 15th April to 4th May(Spans between two months).
Any suggestions?.
you can call this function to gt events in date range. but this will bring you only 30 days evnt. if you pass dates like '01-may-2013' to 15-June-2013' then it will show data from 01-may2013 to 30st may 2013. Lt me know if you can find any clue for this issue.
function GetAgendaEvents(datefrom, dateTo) {
var fromDate = new Date($("#from").val());
var toDate = new Date($("#to").val());
if (fromDate.getTime() <= toDate.getTime()) {
$('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', events);
$('#fullcal').fullCalendar('refetchEvents');
var filteredEvent = $('#fullcal').fullCalendar('clientEvents', function (event) {
return event.start >= fromDate && event.start <= toDate;
});
$('#fullcal').fullCalendar('gotoDate', fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate());
$('#fullcal').fullCalendar('changeView', 'agenda'/* or 'basicDay' */);
$('#fullcal').fullCalendar('removeEvents').fullCalendar('addEventSource', filteredEvent);
$('#fullcal').fullCalendar('refetchEvents');
}
}