I have a button which when clicked, displays a calendar for the user to change the date of an item. After the date is chosen, there will be a confirmation dialogue to ensure that the user would like to proceed. The problem that my code is currently facing is that when the calendar is displayed and the user let's say click the background, the calendar disappear. When the user clicks the button again and proceed to choose the date, the confirmation dialogue comes out multiple times, probably because of the previous attempts. Does anyone know how to fix this?
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
$("#change").datetimepicker("show");
}
Probably, you are calling the reschedule() function each time the user clicks your button, which causes the same "changeDate" event to be attached multiples times on the element.
To prevent that, you can try moving the code that initializes the date-time-picker outside the reschedule() function.
See the code below.
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
function reschedule(){
event.preventDefault();
$("#change").datetimepicker("show");
}
I managed to figure out the solution, just have to unbind it when the calendar is hidden.
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
}).on('hide', function () {
$("#change").unbind();
});
$("#change").datetimepicker("show");
}
Related
headerToolbar:{
left:'prevYear prev today next nextYear',
center:'title',
right:'dayGridMonth,dayGridWeek,timeGridDay,listMonth'
},
date : moment().format('YYYY-MM')
While making Fullcalendar, I suddenly became curious
When I press the prev button in the headerToolbar, I want to make the variable date a month ago. Can I make it so that the function can be executed when I press the prev button?
/admin/visit/schedule/month?managerId"+this.managerId+"&date="+this.date
In this way, when the month of the calendar is changed, the variable date is changed and I am trying to call the api using it.
You can create a custom button to do your 'prev' functionality, and use that instead of the included prev button, as shown.
headerToolbar:{
left:'prevYear myPrevButton today next nextYear',
center:'title',
right:'dayGridMonth,dayGridWeek,timeGridDay,listMonth'
},
customButtons: {
myPrevButton: {
text: 'Prev',
click: function() {
// do something
}
}
},
date : moment().format('YYYY-MM')
The function card should return the card of a certain concert.
But only if the concert's date match the date selected with the datepicker's function. So if I choose the date 06/22/2018 I should see the concert card because the date is the same. But right now it doesn't work because the line:
if(document.getElementById("datepicker").value == this.date)
is picking the value of the input at the top, which is undefined, so it doesn't show anything. So I think I have first to call the function datepicker(),but I don't know how to do.
Here's the code I'm using:
<input type="text" id="datepicker"/></div>
<div id="corpo1"></div>
$(function()
{
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png"
});
});
function Concert(id, name, date, price)
{
this.id = id;
this.name = name;
this.date = date;
this.price = price;
this.card = function()
{
if(document.getElementById("datepicker").value == this.date)
return "<span class='concert'>"+this.name+" "+this.date+"</span>";
}
}
var concerti = [ new Concert(1,"The Fame Ball","06/22/2018",50) ];
function showcard(f)
{
var ris = "";
for(var i in concerti)
{
ris+=concerti[i].card();
}
document.getElementById('corpo1').innerHTML=ris;
}
Anyone who can help?
Try this solution: http://jsfiddle.net/6gub2smo/2/
The key change is the following:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png",
onSelect: showcard
});
jQuery UI recommends using the onSelect event. Documentation here.
Allows you to define your own event when the datepicker is selected.
The function receives the selected date as text and the datepicker
instance as parameters. this refers to the associated input field.
The problem I think you're having that your showcard code isn't being run, at least not at the right time. Adding the following to your Javascript should fix the issue.
$("#datepicker").change(showcard);
It will cause the showcard function to be run when the user selects a new date, when the text of the textbox is changed. The issue you might be having with "undefined" showing up if you don't select the date of the Concert is because the showcard function returns nothing (turned into "undefined") if the dates don't match. You can fix this by adding return ""; to the end of the function to force it to return an empty string and have nothing show up.
I am using JQuery fullCalendar on my project. I'll go directly to my problem.
Whenever I create a new calendar event, and successfully rendered it to the calendar view, then try to resize the newly rendered event, one event keeps resizing also.
so here's my code how I rendered the created event.
this first code is the select event where I get to highlight a range of date and time.
$('#calendar').fullCalendar({
select: function(start, end){
if (start.format("YYYY-MM-DD") == end.format("YYYY-MM-DD")) {
$('#createscheduleModal').modal('show'); // opens bootstrap modal to add title
eventData = {
id: eventCount + 1,
date : start.format("YYYY-MM-DD"),
start : start.format("YYYY-MM-DD HH:mm:ss"),
end : end.format("YYYY-MM-DD HH:mm:ss"),
teacher : auth_id
}
}else{
$('.calendar-view').fullCalendar('unselect');
}
eventCount++;
},
});
Then after selecting date ranges, a modal will pop-up so the user can enter a title for the calendar event. in the modal, there is a button with id="btn-save-sched", when the user click the button it saves the calendar event to the database and render it to the calendar. here is the code for this
$('#btn-save-sched').click(function(){
eventData.title = $('#event_name').val(); // add title to eventData object
if ($('#event_name').val() == "" || $('#event_name').val() == null) {
swal('Ooops!','Please enter an event name','error');
}else{
$.ajax({
url : teacher_ajax,
type : 'POST',
data : eventData,
success : function(res){
eventData.editable = true; //set this event to be editable
$('.calendar-view').fullCalendar('renderEvent', eventData, true);
$('#event_name').val('');
$('#createscheduleModal').modal('hide');
}
})
}
});
so the code above successfully renders the calendar event into the calendar then when I try to resize this newly created event, another event keeps resizing together with the new event.
Please see the gif below what's happening when I add a new event
Thanks guys!
so I've got quiet a mashup/collection going on here...In our app we are using FullCalendar and events load up in Bootstrap Modal, then if user wants to, he/she can click on the field and it'll become editable with help of jEditable, and a new custom "type" that I've created for Timepicker field.
Code below is what creates a new input type for the timepicker editable field
$.editable.addInputType('timepicker',
{
element : function(settings, original)
{
var input = $('<input id="timeToEdit">');
input.attr('autocomplete','off');
var hidden = $('<input type="hidden" id="editedEventTime" />');
$(this).append(hidden);
$(this).append(input);
return(hidden);
},
plugin : function(settings, original)
{
var form = this;
settings.onblur = 'ignore';
$(this).find('#timeToEdit').timepicker(
{
alwaysSetTime: true,
timeOnly: true,
timeFormat: "h:mm TT",
altField: "#editedEventTime",
altFieldTimeOnly: true,
altTimeFormat: "HH:mm:00",
stepHour: 1,
stepMinute: 15,
onSelect: function(dateText) {},
onClose: function(dateText)
{
original.reset.apply(form, [settings, original]);
},
});
}
});
This is the code that let's me add that timepicker on click to editable field:
$('.eventEditStartTime').editable('phpfiletotalktodb.php', {
type : "timepicker",
submit : "<span class='btn btn-mini btn-success'><i class='icon-ok'></i></span>",
cancel : "<span class='btn btn-mini btn-danger'><i class='icon-remove'></i></span>",
tooltip : "Edit start of the event",
indicator : "Saving...",
callback : function(value, settings) {
$('#fullCalendar').fullCalendar('refetchEvents');
}
});
The problem that I'm having is that if user clicks on the field to edit, but doesn't pick anything, and clicks off the screen and modal window disappears, and then user click on that event again to edit it, it won't make that field editable again.
One possible cause that I could think of is that when user clicks on the event, it shows up and then user click on the time field to edit it, dropdown shows up but the field is empty, even though the value is in "hidden" field, maybe that's what causing it to render un-editable, but i'm not sure how to bypass that.
Thank you in advance for help and looking into this.
I have a jquery UI datepicker calendar in an event page(sharepoint page).
$('#datepicker').datepicker();
I need to get the date once user clicks on any date and get that date and pass it to the page url as mypage.aspx?dt=1/12/2012.I have this but not working.
$('.ui-datepicker td a').click(function(){
var url=$(location).attr('href');
var date = $(this.datepicker( "getDate" ));
if(date != 'null')
url += '&dt=' + date;
window.location.href=url;
});
Neither is this working..
$('.ui-datepicker td a').click(function() {
window.location.href = 'http://mysite/events/Pages/default.aspx?dt=' + $('#datepicker').datepicker().val();
});
can someone help?
try
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
window.location = 'http://mysite/events/Pages/default.aspx?dt=' + dateText;
}
});
uses the onSelect event (documented here)
Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.