I have a Fullcalendar calendar and I add on it some background events. Those background events represent slots that cannot be clicked or dragged into. Is there a way to detect this (that the user clicked on a background event)?
Background event is rendered as a DIV with the class name fc-bgevent.
My code for detecting the click background event is:
element.fullCalendar({
...
dayClick: function(date, jsEvent, view) {
if (jsEvent.target.classList.contains('fc-bgevent')) {
alert('Click Background Event Area');
}
},
...
});
Related
I want to form some kind of event trigger that would display Tailwind values only during when my click is pressed. If I keep on pressing the button would appear as if it is physically pressed i.e. "shadow-inner" or some other tailwind value
Do I need a separate event listener or is there some tailwind event like "hover:" that I don't know of
Use active: variant which represents :active pseudo-class.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
<button type="button" class="bg-red-500 active:bg-blue-500">Button</button>
This button will be blue when clicked (pressed)
DEMO
There is no events in tailwind for this, since this is JavaScript.
You have to use mousedown and mouseup to achieve what you want.
For example :
const button = document.querySelector('button');
button.addEventListener('mousedown', () => {
// logic here
});
button.addEventListener('mouseup', () => {
// logic here
});
To change the color of the calendar after processing.
Instead of changing the color of the initial state, we want to change the color of certain events later.
function change_color(event_id){
.....
change color event
}
$(document).ready(function () {
$('#calendar').fullCalendar({
.......
});
});
You can use the eventRender callback to bind a click function or whatever you want to the event elements. In this codepen example I have added a click function that when an event is clicked it will change the color to green with css. You can also access the event properties to do something like event.color = 'green', which will not update on the calendar but could be useful for updating the event in the database.
eventRender: function(event, element, view) {
element.bind('click', function() {
$(this).css('background-color', 'green');
});
}
I have a calendar with drag functionality where a user can drag events to quickly update them.
After Dragging an event I ask the user if he wants to save it and then call a UpdatEvent function.
However, before the user confirms, (just as the dialog appears) the event automatically reverts back and only return to the updated position if I confirm in the dialog.
Is there a way for the event to stay in the dragged position and then either revert back or stay in the actual one?
My eventDrop looks like this:
eventDrop: function (event, delta, revertFunc) {
if (confirm("Do you wish to save the event?")) {
UpdateEvent(event.id, event.start);
}
else {
revertFunc();
}
}
At the beginning of the Eventdrop and/or Eventresize place the following:
$('#calendar').fullCalendar('updateEvent', event);
How to show a delete icon near to fullcalender event .. I tried to add html img tag but it is shown as text in event...it is not showing the image icon....
I have resolve the issue.....
eventRender: function(event, element) { element.find('span.fc-event-title').html(element.find('span.fc-event-title').text()); },
I implemented the eventClick event to open a colorbox
eventClick: function(calEvent, jsEvent, view) {
if(calEvent.type=='date') {
$.colorbox({nofollow:true, href:'/this/that/date-edit/'+calEvent.id+'/'+calEvent.part});
}
})
When I click an the event in the calendar, the colorbox opens but in the background the event is dragged around on the calendar moving the mouse. How can I prevent this?
Maybe this can help you. I'm using colorbox for similar feature and this is my working code
eventClick: function(calEvent, jsEvent, view) {
if (calEvent.editable) {
id = calEvent.id;
displayInput($(this), calEvent.start, calEvent.title);
}
},
function displayInput(sender, date, title) {
sender.colorbox({ width: "50%", inline: true, href: "#calendarInput" });
date = $.fullCalendar.formatDate(date, 'dd.MM.yyyy')
$('#txtDate').val(date);
$('#txtDescription').val(title);
}
#calendarInput is div id that's displayed as popup.
There is no such effect if I got you right. I'm using FullCalendar v1.5.1