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!
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')
I'm fairly new to kendo and facing a problem with kendo dropDownList.
I have Channel list kendo dropDown in my Add/Edit popup form. And every time I save my form and click on new Add/Edit I want that saved channel name in that dropDownList.
I'm calling the dropDown data from a SP and then populating that DropDown.
Here is my kendo DropDown:
function buildChannelDropDown(){
$('#ddlChannelSelect').kendoDropDownList({
dataTextField: 'Text',
dataValueField: 'Value',
optionLabel: "Select Main Station",
dataBound: function(e){
if(!onDataBound_SelectByDefaultIfOnlyOneItem(e)) {
var dropdownlist = $("#ddlChannelSelect").data("kendoDropDownList");
var mainChannelDataSource = dropdownlist.dataSource;
if(mainChannelDataSource._data.length > 0){
dropdownlist.select(0);
}
}
},
change: function(){
var selectedChannel = 0;
if($('#ddlChannelSelect').val() != ""){
selectedChannel = $('#ddlChannelSelect').val()
}
GetDataForSelectedChannel(selectedChannel);
},
filter: 'contains'
});
}
And this my function which brings all channel list from backend
function setChannelDropDown(){
var paramObj = {
ChannelGroupId = $("#ddlChannelGroup").val();
}
InvokeAjaxMethod('/Channel/GetChannelList', 'Get', true, paramObj, function(response){
var channelDropDown = $('#ddlChannelSelect').data('kendoDropDownList');
channelDropDown.setDataSource(response.Data);
});}
i'm calling setChannelDropDown() function on Add/Edit button click. Everything is working fine and newly added Channel gets shown in dropDown. Except when I search/type in Filter box in Dropdown(I have kept fiter: "contains"). When I search and select an option and save the form, Popup Form gets close but DropDown opens up. See this Image.
This is how it looks
This DropDown opens up on grid after saving and closing form. After Debugging it came to known that dataBound gets hit again. This happens only when I type in filter box and save.
Does anyone know I can solve this and prevent it from happening?
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 was wondering how can I get in the html element with ".k-event" class, contains selected event in function binded to edit event of the Scheduler?
$("#src-ap-01-scheduler").kendoScheduler({
date: new Date(),
allDaySlot: false,
editable: {
template: $("#scr-ap-01-editor").html()
},
edit: function(e){
// i have tried these
// e.currentTarget
// e.container.closest("k-event")
}
})
I've logged the (e) on the function but I have no idea how to get the .k-event element from inside of the function. I hope you guys have some idea to get this element, any advice would be appreciated, thanks.
To get selected event element put this code in function triggered on edit:
edit: function(e){
var uid = e.container.attr('data-uid');
var element = e.sender.element.find('div.k-event[data-uid="' + uid + '"]');
}
Greetings.
The above answer doesn't work in Kendo UI v2015.1.318, and here's my quick solution for this issue.
edit: function(e) {
if (e.event.YOUR_EVENT_CONDITION) {
// Allow the user to edit this event!
} else {
e.preventDefault();
var element = e.sender.element.find('div.k-event[data-uid="'+e.event.uid+'"]');
if (element)
$(element).notify("You can't modify a completed event.", {className: "error", placement: "top", autoHideDelay: 3000});
else
$.notify("You can't modify a completed event.", "error");
}
}
I'm using notify.js to display a popup message right on the selected event UI only if it exists. Please visit the following link for notify.js.
http://notifyjs.com/
I'm creating a "summary" list of events on the page alongside the calendar. I want to trigger the eventClick handler of an event when I click on the entry in the summary. The markup for a summary entry is
<dd id="E45">9:00am-10:00am</dd>
where the id is fullCalendar's event ID.
How can I trigger an eventClick (on the correct event) when the user clicks on the dd?
EDIT:
Thanks for the response. I don't think I was clear enough, though, about what I'm trying to do.
I don't want the fullCalendar instance to have to know in advance that its eventClick event might be triggered from an event outside of itself.
If "summary" and "calendar" are two separate divs and the fullCalendar has been instantiated in the "calender" div and a summary object has been instantiated in the "summary" div, then I'd like to do something like this to trigger the eventClick of the calendar (and pass the correct arguments) when a dd is clicked in the summary.
$("#summary dd").click($("#calendar").fullCalendar.trigger("eventClick", ???????));
This would not be in the fullCalendar code.
Instead of triggering eventClick handler, I've used the updateEvent fullCalendar method:
var eventsToBeUpdated = [];
var allEvents = $('#calendar').fullCalendar('clientEvents');
var chosenEvents = $('#calendar').fullCalendar('clientEvents', eventId);
// remove selected-event css from all events
for (var ei in allEvents) {
var e = allEvents[ei];
var classIndex;
if (classIndex = e.className.indexOf("selected-event") != -1) {
e.className.splice(classIndex, 1);
eventsToBeUpdated.push(e);
}
}
if (chosenEvents.length > 0) {
chosenEvents[0].className.push("selected-event")
eventsToBeUpdated.push(chosenEvents[0]);
}
// update all events which have changed
for (uei in eventsToBeUpdated) {
var updatedEvent = eventsToBeUpdated[uei];
$("#calendar").fullCalendar("updateEvent", updatedEvent);
}
Ok , Not sure exactly what you are trying to do.
You can define the eventClick: in the fullcalendar declaration. The calEvent parameter includes the ID from the Event Object. So could you add a new function and then call that same function passing the ID from your <DD ID="1"> that matches the event click?
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
}
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');
eClick(calEvent.id);
}
});
function eventClick(id) {
alert('Event ID: ' + id);
' Your event click code would go here.
}
try this :
$("#summary dd").click(function() {
var eventId = $(this).attr('id');
var events = $('#calendar').fullCalendar('clientEvents',eventId);
if (events.length > 0) {
$("#calendar").fullCalendar.trigger('eventClick', events[0]);
}
});