I am trying to last one week to customize Semantic UI Calendar Disable past dates it is possible. I want like this I pasted example URL below. and my condition is if I select end date then if I open start date so whatever end date I have selected in start calendar after that day all days will be disabled.
Example:
http://jsfiddle.net/nicolapeluchetti/dAyzq/1/
$containerEventsAlerts.find('#rangeStart').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
endCalendar: $containerEventsAlerts.find('#rangeEnd'),
onChange: function(date, text, mode) {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
//console.log($rangeEnd.val());
$('#rangeEnd input').val(text);
}
},
isDisabled: function(date, mode) {
return true;
},
onHidden: function() {
var $rangeStart = $('#rangeStart input');
if (spa.isBlank($rangeStart.val())) {
$rangeStart.val($('#rangeEnd input').val())
}
}
});
$containerEventsAlerts.find('#rangeEnd').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
startCalendar: $containerEventsAlerts.find('#rangeStart'),
onChange: function(date, text, mode) {
var rangeStart = $('#rangeStart input');
if (spa.isBlank(rangeStart.val())) {
$('#rangeStart input').val(text);
}
},
onHidden: function() {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
$rangeEnd.val($('#rangeStart input').val())
}
}
});
There is no inbuilt solution for this in the library you are using. But there is a hack that can you do like below.
var today = new Date();
$('#rangestart').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangeend').calendar({
type: 'date',
minDate: date
})
}
});
$('#rangeend').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangestart').calendar({
type: 'date',
maxDate: date
})
}
});
There can be some more modifications required as per your need. But you have to do it all manually.
Related
I have an issue. I have set updateViewDate to false. The problem is that when I try to change date with code like this $('#calendar').datepicker('setDate', '2019-12-20'); month view doesn't change, it still shows current (November) month. If updateViewDate is set to true when it works perfectly fine. How to fix this? Full code:
$('#calendar').datepicker({
language: 'lt',
autoclose: true,
templates: {
leftArrow: ' ',
rightArrow: ' '
},
orientation: 'auto',
updateViewDate: false,
beforeShowDay: function (date) {
if(enabledDates.hasOwnProperty(date.toLocaleDateString('lt-LT'))) {
return {
enabled: true,
classes: ((enabledDates[date.toLocaleDateString('lt-LT')] > 0 ? 'reservation-date' : 'full-reserved-date'))
};
} else {
return false;
}
}
}).on('changeDate', function(e) {
$('.free-times').html('');
lastSelectedDate = e.format();
$.get('/reservation/short-term/get-free-times',
{
selectedDate: lastSelectedDate,
premiseId: premiseId,
userSelectedTimes: Object.keys(userSelectedTimes)
}, function(data) {
$('.free-times').html(data);
$('[data-toggle="tooltip"]').tooltip();
});
}).on('changeMonth', function(e) {
var selectedDate = e.date.toLocaleDateString('lt-LT');
$.get('{{ route('reservation.update-calendar') }}',
{
selectedDate: selectedDate,
premiseId: premiseId,
}, function(data) {
enabledDates = data;
$('#calendar').datepicker('update');
if(lastSelectedDate) {
$('#calendar').datepicker('setDate', lastSelectedDate);
}
});
});
Thanks for help in advance!
P.S Tried $('#calendar').datepicker('_setDate', lastSelectedDate, 'view'); it kind of works, but I want that after this function call changeMonth method would be called (Only if that month is different than current)
I have two datepickers (calendar), both are connected with each other. When I select a date from one, another datepicker date should be automatically selected.
I am trying with javascript but that is not working. I am failing to do this
$(function () {
$('#example1').daterangepicker({
showCalendar: true,
locale: { format: 'DD-MMMM-YYYY' },
autoApply: true,
});
$(function () {
$('#example2').daterangepicker({
showCalendar: true,
locale: { format: 'DD-MMMM-YYYY' },
autoApply: true,
});
the date will be shown one selected from anyone
HTML:
<input id="from"> <input id="to">
JS:
<script>
$('#to').datepicker({
defaultDate: new Date(),
minDate: new Date(),
onSelect: function(dateStr)
{
$("#to").datepicker( "hide" );
$('#from').val(dateStr);
$('#from').focus();
$('#from').datepicker( "show" );
$("#from").datepicker( "option", "minDate", finalDate );
}
});
$("#from").datepicker({
defaultDate: new Date(),
minDate: new Date(),
onSelect: function(dateStr)
{
$("#from").datepicker( "hide" );
$('#to').val(dateStr);
$('#to').focus();
$('#to').datepicker( "show" );
$("#to").datepicker( "option", "minDate", finalDate );
}
});
</script>
See the below jsfiddle:
Datepicker
Checkout this way.
$('#example1').change(function(){
var value = $(this).val();
$('#example2').val(value);
});
If you want this to work for any one add the following as well
$('#example2').change(function(){
var value = $(this).val();
$('#example1').val(value);
});
Before questioning, I reveal that I am a beginner.
I'm using fullCalendar for the first time.
When I clicked on the date, I made the event registration.
var calendar = $('#calendar').fullCalendar
({
dayClick: function (date, allDay, jsEvent, view)
{
$('#calendar').fullCalendar('renderEvent',
{
title : '휴진',
allDay : true,
start: date, //specify start date
stick : true,
backgroundColor: '#fe4978'
});
}
});
This code allows duplication in event registration.
Once an event is registered for a specific date, I would like to prevent the event from being registered thereafter.
I have seen docs related to removeEvent, but I do not know how to write the code.
I would really appreciate it if you could give me a guide.
This could help you #won.
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
}
});
Updated:
Add a function before you store the selected event into the object.
function IsDateHasEvent(date) {
var allEvents = [];
// add your calendar events into the array.
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
and change your code as follows.
dayClick: function (date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
// No previous event on this date.
selectedDate = date;
eventData = {
title: title,
start: start,
stick : true,
backgroundColor: '#fe4978',
overlap: false,
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
// add new appointment code.
//$("#divAddNewAppointment").dialog("open");
}
else {
//$('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
$('#calendar').fullCalendar('unselect');
$("#divMessage").dialog("open");
}
}
I am trying to build an application that creates events within fullcalendar. I don't allow user to create an "allDay" event at all at the client side but they still can see it within the view. Is there any method to remove allDays from views completely?
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
header: header,
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
}
})
}
From the docs:
allDaySlot: false
https://fullcalendar.io/docs/agenda/allDaySlot/
** Update for v5:
https://fullcalendar.io/docs/allDaySlot
I am using the FullCalendar plugin for one of my projects. When user clicks on one area of the calendar then it shows a popup with input and Appointment button. When user clicks on the Appointment button then makeAppointment function is called where I simply echo startDate to the console.
For the first time when user clicks on the Appointment button, it logs selected date and time. When user selects "second date and time" and clicks on Appointment button on popup, it shows two dates and times i.e. one previous date and time and one currently selected date and time. Same goes for third and forth time. Why it has this behavior and how can I fix it?
Here is my code
var Calendar = {
init: function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
ignoreTimezone: false
},
select: this.select
});
},
select: function (startDate, endDate, allDay, jsEvent, view) {
Calendar.Dialog.init(startDate, endDate);
},
Dialog: {
init: function (startDate, endDate) {
this.show();
$('.overlay').on('click', function () { Calendar.Dialog.close() });
$('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
},
//show and close functions are here
makeAppointment: function (startDate, endDate) {
console.log(startDate);
}
}
}
Try to check first if the Dialog has been initialized, otherwise don't do it again.
var Calendar = {
init: function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
ignoreTimezone: false
},
select: this.select
});
},
initialized: false,
select: function (startDate, endDate, allDay, jsEvent, view) {
if (this.initialized === false) {
this.initialized = true;
Calendar.Dialog.init(startDate, endDate);
}
},
Dialog: {
init: function (startDate, endDate) {
this.show();
$('.overlay').on('click', function () { Calendar.Dialog.close() });
$('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
},
//show and close functions are here
makeAppointment: function (startDate, endDate) {
console.log(startDate);
}
}
}