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');
}
Related
Hello i'm trying to work with Fullcalendar (from here http://fullcalendar.io) but I don't find if I can change or delete an event already planning on calendar just by clicking on the event area to edit or delete it ? is that possible ? Thanks for your answers
I'll try this at the bottom of my calendar.html file
$(this).data('eventObject', eventObject);
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
Yes this is possible.
1) Use eventClick: to trigger your function when the user clicks on the event.
2) Modify the event properties as necessary, e.g. event.title = "Test";
3) Call updateEvent on fullCalendar's div, with your modified event as the parameter.
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
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();
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));
}
});