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')
Related
I am trying to highlight an event on my calendar when user clicks. I already have some basic code, but it's not working as i expected. The way my code works now it's just highlighting for a week and not until the end of the event as it is shown in the calendar. Here's some of my code
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var lang = document.getElementsByTagName('html')[0].getAttribute('lang');
if(lang == 'hy'){
var language = hyLocale;
}else if(lang == 'ru'){
var language = ruLocale;
}else{
var language = 'en';
}
var calendar = new Calendar(calendarEl, {
locales: [ ruLocale, hyLocale],
locale: language,
plugins: [dayGridPlugin],
events: '/events/get',
eventClick: function(info) {
// This is where it resets the highlight when user clicks on another event
$('.fc-event-container a').css('background-color', '#3788d8');
// This is where i set the background color of the event when user clicks
$(info.el).css('background-color', '#00da4a');
$('#info-container').empty();
var html = 'basic html for div';
$('#info-container').append(html);
}
});
And here's what it looks like on the front end.
I want to highlight the entire event even on the next month.
I have been doing something similar. So, I would like to share my idea for you.
See if it works for you.
What I did is to assign an id to each event at my code, like,
Id for Event 1 is: no1, for Event 2 is: no2 etc.
Than I used eventRender to assign the id of event as a class name to the event, so it will assign that to each element where the event is stretched.
The code would be as follow:
eventRender: function(info) {
info.el.className += " " + info.event.id + " ";
}
Than in eventClick, use that class to assign your css at run time, as follow:
eventClick: function (info) {
$('.'+info.event.id).css("background-color", "#00da4a");
}
Note that it assigned css but to remove that css and to apply to other event element, I will leave that logic upto you :)
UPDATE:
When next or previous clicked, and event is stretching till next or previous month, you may need to use global event id variable to store selected event id.
And on next and previous button click, you may use that selected event id to change color of that event.
For example:
var gEventId = 0;
document.addEventListener("DOMContentLoaded", function () {
// First Call the Calendar Render code here...
$('.fc-next-button, .fc-prev-button').click(function(){
if (gEventId > 0)
{
$('.'+ gEventId).css("background-color", "#00da4a");
}
});
});
The gEventId is saved in eventClick as follow:
eventClick: function (info) {
gEventId = info.event.id;
$('.'+ info.event.id).css("background-color", "#00da4a");
}
To roll back selected event id to 0, you may click that event again or provide some other mean to unselect the event. The logic is simple, you need to check if clicked event id is same as already selected event id (value stored in gEventId), than set gEventId to 0 and unselect the highlighted background else highlight the background color and set gEventId to event id.
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");
}
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!
I use autosuggestion plugin.
First I have code:
$('.auto').autocomplete({
lookup: data,
onSelect: function (suggestion) {
console.log(koji);
$('#cena_'+koji).val(suggestion.cena);
console.log(suggestion.ID);
$('#jmere'+koji).val(suggestion.jmere);
$('#kol'+koji).val(suggestion.kol);
$('#popust'+koji).val(suggestion.popust);
$('#pdv'+koji).val(suggestion.porez);
etc...
and this is OK, so when I pick some Item from list I update other input fields.
But after that I just choose other value for #cena or #jmere but if I click again on input field with class .auto (that is picked before), then onSelect is again fired and values I choose manualy #cena or #jmere been changed to suggested values.
Please help me to solve this problem. So how I can prevent call onSelect when there is already picked Item...
The JS code of onSelect is:
onSelect: function (index) {
var that = this,
onSelectCallback = that.options.onSelect,
suggestion = that.suggestions[index];
that.currentValue = that.getValue(suggestion.value);
if (that.currentValue !== that.el.val() && !that.options.preserveInput) {
that.el.val(that.currentValue);
}
that.signalHint(null);
that.suggestions = [];
that.selection = suggestion;
if ($.isFunction(onSelectCallback)) {
onSelectCallback.call(that.element, suggestion);
}
},
So is there any way to change onSelect option - to prevent calling when there is already picked some item?
You can disable the autocomplete by using disable:
$('SELECTOR').autocomplete('disable');
And you can change it back like:
$('SELECTOR').autocomplete('enable');
jsfiddle DEMO
If you want to completely remove the autocomplete you can use despose ad OP said:
$('SELECTOR').autocomplete('dispose');
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.