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');
},
Related
I would like to highlight a selected date.
ex: i already clicked a date and the selected date is inserted in the textbox,now again i clicked the calendar, now the date in the textbox should highlight in the calendar.
Im able to highlight the selected date in dayClick, but couldn't highlight it when he is back to calendar to change the option.
Can someone help me.!
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");}
Sorry, my previous answer is not correct.
Change your code line:
$("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");
to this:
$('.fc-day[data-date="' + date.format('YYYY-MM-DD') + '"]').addClass("fc-state-highlight");
thank you Asator for your reply
based on your answer i could able to solve in this way
dayRender: function (date, element, view) {
var dateString = moment(displayDate).format('YYYY-MM-DD');
view.el.find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#3276b1');
}
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 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.
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');
}
});
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));
}
});