In timepicker set interval time first time after that no change interval time. Interval time come from dynamically.
I got interval value dynamic but not display in my timepicker.
<script>
$('#book_time').attr('disabled', true);
$('#book_date').datetimepicker({
timepicker: false,
format: 'm-d-Y',
minDate: 0,
onSelectDate: function (ct, $i) {
var branch = $('#branch_id').val();
// console.log($i.val());
if (branch == '')
{
alert("Please select the branch");
$('#book_date').val('');
} else
{
$('#book_time').change();
let data = {
branch_id: branch,
booking_date: $i.val(),
delivery_type: "A"
}
$('#book_time').attr('placeholder', 'Please wait...');
axios.post('<?= SIET_URL ?>book_table_time_management.php', data)
.then(response => {
$('#book_time').attr('disabled', false);
$('#book_time').attr('placeholder', '');
var interval = response.data.stepsDay;
console.log(interval);
$('#book_time').timepicker({
// console.log(response.data.stepsDay);
timeFormat: 'hh:mm p',
interval: interval,
minTime: response.data.startTime,
maxTime: response.data.endTime,
startTime: response.data.startTime,
// changeinterval:true,
dynamic: true,
dropdown: true,
scrollbar: true
});
console.log(response.data.stepsDay);
// };
})
.catch(error => {
});
}
}
});
</script>
I want to change timepicker interval value change.
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 been using jQuery along with fullcalendar to create a calendar that displays events from a database using php and MYSQL.
The calendar looks like this.
The events are shown in red. I would like to be able to add a button in each of the cells that do not have an event to allow the user to be able to add one.
Here is the code I have tried
viewRender: function (view) {
$(".fc-content").append('<button>Add</button>')
}
my full code.
$(document).ready(() => {
const calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
defaultTimedEventDuration: '01:00',
allDaySlot: false,
scrollTime: '09:00',
businessHours: {
dow: [ 2, 3, 4, 5, 6 ],
start: '09:00',
end: '17:30'
},
//viewRender: function (view) {
// $(".fc-content").append('<button>Book</button>');
// },
long: /^en-/.test(navigator.language) ? 'en' : 'zh-cn',
eventOverlap: (stillEvent, movingEvent) => {
return true;
},
events:
<?php echo $json;?>
//'2018-12-12T15:00+08:00'
//},
//{
//title: '',
//start: '' //'2018-12-12T12:00+08.00'
,
eventColor: '#FF0000',
edittable: true,
selectable: true,
selectHelper: true,
select: (start, end) => {
const duration = (end - start) / 1000;
if(duration == 1800){
// set default duration to 1 hr.
end = start.add(30, 'mins');
return
calendar.fullCalendar('select', start, end);
}
let eventData;
if (title && title.trim()) {
eventData = {
title: title,
start: start,
end: end
};
calendar.fullCalendar('renderEvent', eventData);
}
calendar.fullCalendar('unselect');
},
eventRender: (event, element) => {
const start = moment(event.start).fromNow();
element.attr('title', start);
},
loading: () => {}
});
});
Ok first off, unless the button is required from UI/UX perspective, you can skip adding the button and just work with fullCalendars built-in method/events.
example (skipping irrelevant options):
fullCalendar({
...
editable: true,
selectable: true, // makes each day selectable
select: function (start, end) {
// in this select callback you are given the start and end dates of the user's selection
// when a user selects any cells this will fire and you can do stuff in here
// fullcalendar will always give 2 dates as callback, even if the user only selected 1
// date, the 'end' will correspond to the next day actually...
events: [{event1},{event2},{event3}], // use this to initialize the events already //existing
eventClick: function (event) {
// this is the handler that will run when the user clicks on an event, not a day! an //event on a day
}
}
})
I hope this helps, you can always read more on the docs
You do not need button ..
you can do it in function eventClick this trigger in click on any day
$('#calendar').fullcalendar({
eventClick : function(xEvent, jsEvent, view){ hus_eventClick(xEvent, jsEvent, view);} ,
});
and in function show dialog box to add event ..
https://fullcalendar.io/docs/dayClick
I've built a webpage to run on a digital calendar I've built for a Raspberry Pi. The webpage contains, 2 calendar feeds, the current weather, and time/date.
The problem I'm having is I have each function set to run at different intervals but after a few hours the web page freezes up. I can still SSH into the Pi and use the Pi but the webpage becomes unresponsive.
The basis of the intervals are set like this:
// Update time every 1 second using MomentJS
setInterval(updateTime, 1000);
// Update background every 10 seconds
setInterval(randombg, 10000)
// Update Calendar every 30 seconds
setInterval(calendarRefresh, 30000)
Any help is appreciated, cheers
Full code below as requested:
var app = angular.module('SmartCal', []);
app.controller('myCtrl', function ($scope, $http, $interval) {
//=========================
// Backgrounds
//=========================
$scope.randombg = function () {
$('body').css('background', 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/' + Math.floor((Math.random() * 150) + 1) + '.jpg)')
}
setInterval(function () {
$scope.randombg();
}, 10000)
$scope.randombg();
//=========================
// Clock
//=========================
const weekdayName = $('.weekdayName');
const dateNumber = $('.dateNumber');
const month = $('.month');
const year = $('.year');
const time = $('.time');
function update() {
weekdayName.html(moment().format('dddd'));
dateNumber.html(moment().format('D'));
month.html(moment().format('MMMM'));
year.html(moment().format('YYYY'));
time.html(moment().format('h:mm:ss a'));
}
setInterval(update, 1000);
//=========================
// Get Calendars
//=========================
const calendar = $('#calendar');
const calendarlist = $('#calendarlist');
$scope.getCalendar = function () {
calendar.fullCalendar({
eventSources: [{
googleCalendarApiKey: '#',
googleCalendarId: '#'
},
{
googleCalendarApiKey: '#',
googleCalendarId: '#'
}
],
defaultView: 'month',
height: 500,
header: false
});
calendarlist.fullCalendar({
eventSources: [{
googleCalendarApiKey: '#',
googleCalendarId: '#'
},
{
googleCalendarApiKey: '#',
googleCalendarId: '#'
}
],
defaultView: 'list',
duration: {
days: 30
},
height: 400,
header: false
});
}
//=========================
// Calendar Refresh
//=========================
$scope.calendarRefresh = function () {
calendar.fullCalendar('refetchEvents')
calendarlist.fullCalendar('refetchEvents')
}
//=========================
// Init
//=========================
$scope.getCalendar();
$interval(function () {
$scope.calendarRefresh();
}, 30000);
});
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.
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