FullCalendar set DatePicker after set day - fullcalendar

I'm using JQuery FullCalendar with DatePicker. I'm wondering when you change the date in FullCalendar he update the DatePicker, which event should I use to do this?


I'm assuming that when you click on a day on the calendar you want to change the date of the DatePicker. You could use the dayclick event to accomplish this.
Here is an example:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
//update the datepicker here
}
});
The date parameter holds a Date object for the current day.


This will change the date of the DatePicker to match the current view of FullCalendar. For example, when the prev, next, or today buttons are clicked.
$('#calendar').fullCalendar({
viewRender: function(view, element){
var currentdate = view.intervalStart;
$('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
}
});

Related

date validation in ASP.net

im creating a hotel booking system using asp.net. I'm using drop down list to allow user to choose the days and month. Lets say today's date is 15/2. but my system allow user to choose the date before that. How do i prevent user from choosing dates before the current date?

try JQuery DatePicker :-(You'll Find Solution Here)
http://allittechnologies.blogspot.in/2015/05/aspnet-choose-date-by-using-jquery-in-software-it-technologies.html

You can use jquery datepicker and use the on select event.
$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);
if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});
This is a jsfiddle demo

How to make kendoDatePicker popup

I have two kendo date pickers. I want to be able to make the other one popup after a date is selected on the first one. Here is my code snippet:
$(this.oParentDiv.find('.datePicker')).kendoDatePicker({
format: "yyyy-MM-dd",
change: function (e) {
if (e.sender.element.context.className.indexOf("fromDate") != -1) {
$(".toDate").val(moment(this._value).format('YYYY-MM-DD'));
//Code to make toDate popup comes here
}
}
});
How can I make the toDate popup after a date has been selected in the fromDate?

There is an open method on date picker instances. You can call it like this from within your change function after you set the second picker's value:
$(".toDate").data("kendoDatePicker").open();

How to get the end date of an event using eventClick Fullcalendar

How can i get the event end date using eventClick, we already tried to use view.end but it gives different date and the event.end doesn't exist.
we are planning to edit the event using a modal and populate the input box when eventclick.
Thank you
sample code
eventClick: function(event, jsEvent, view){
console.log(moment(event.end).format("MM/DD/YYYY"));
}
the event is working when you view it on the calendar, the start and end date is set.

How do I Change the view from month to day view if i click on a specific day

I am writing a website in html and using full calendar. I got the events to add to the calendar and show.
My question is how do i code the functionality to change the view of the calendar from month to day view of that day I clicked on when I click on a specific date in month view?
I have this code to give the date i clicked on but cant change the view.
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
},

You almost have it:
$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaDay');
}
});

Jump to agendaweek from month view when date is picked

I would like for the user to be able to jump to the agendaWeek view
from the month view after selecting a date and that week view should
contain selected date in it.Can anyone suggest a way to achieve that
functionality?
if(view.name == 'month'){
$('#calendar').fullCalendar('changeView','agendaWeek');
}

http://jsfiddle.net/3E8nk/783/
dayClick: function(date, jsEvent, view) {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaWeek');
},

Resources