I want to increase the space between two events in month view of full calendar.
you need to modify css element of event in EventRender Function
you can achieve spacing between events like this
eventRender: function (event, element, view) {
$(element).css("margin-top", "5px");
$(element).css("margin-bottom", "5px");
}
Related
I want to Add hover effects on Events of Angular Full-calendar-view(using this version ^5.10.2).
I tried by using eventMouseEnter and eventMouseLeave functions but it's not helping me to add effects on events.
Pic attached to show events on Full calendar.enter image description here
I don't know if you use Jquery, but if yes, you could define your hover style(s) in a class (in my case, .event_hover) and then do something like...
eventDidMount: function(info) {
var $el = $(info.el);
$el.hover(function() {
$(this).addClass("event_hover");
}, function(){
$(this).removeClass("event_hover");
});
}
If you don't use jQuery, you may could do something similar in Javascript, but at the end the key is to modify the eventDidMount event.
Hope it goes right for you.
I am using FullCalendar in my project. I used background events, rendering="background". How can I detect if user click on the background events? I try this but it doesnot work since all dates cannot be clicked.
dayClick: function (start, end, allDay, jsEvent, view,color,calEvent) {
if (calevent.rendering==="background") {
alert('Click Background Event Area');
}
else{
$('#modal1').modal('show');
}
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
},
Since fullCalendar doesn't expose an "click" type event on background events, the only way I can think of to do this is essentially a DIY approach. The basic idea:
Handle the "select" event
Fetch all the events currently in fullCalenar's memory, using the "clientEvents" method.
Loop through them all and check whether any of them are background events, and if so, whether they overlap with the selected time period. If they do, then that's the event that was clicked on.
I haven't tested this, but it's based on some old code I found, so hopefully you get the idea:
select: function(start, end, jsEvent, view) {
var cal = $("#calendar"); //put the ID of your calendar element here
var evts = cal.fullCalendar('clientEvents'); //get all in-memory events
var selectedEvent = null;
for (i in evts) {
if (evts[i].rendering == "background" && start.isBefore(evts[i].end) && end.isAfter(evts[i].start)) {
selectedEvent = evts[i];
}
}
}
The only flaw in this is that "select" allows selection of a time period, not just a single click, so it could be that the selection is overlapping the background event, and not wholly contained within it. You might be able to adjust the logic a little bit if that doesn't suit you - e.g. to require that both start and end are within the event's boundaries.
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 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');
}
},
...
});
Scenario: I have an .aspx page containing multiple collapsible panels. Each panel represents a different report. To run a report, you click a panel and the report's user controls will appear. The date range control I created could be contained "within" more than one panel.
The code below does not work in the multiple panels instance. It sets all of the "to date" text boxes equal to the start date instead of just the active panel's "to date" text box.
How do I only work with the text boxes in the panel I have expanded?
Thanks for your help!
<script type="text/javascript">
$(document).ready(function(){
$('#dFrom').datepicker();
$('#dTo').datepicker();
$('#dTo').click(function(){
try{
var from = $('#dFrom').datepicker("getDate");
$('#dTo').datepicker("setDate",from);
}
catch(Error)
{
alert(Error);
}
});
});
Firstly, you shouldn't be using IDs for any html element that exists more than once, use classes to identify repeating elements instead.
To answer your question, you need to use $(this) to point at the specific element the click event is coming from. You can then simply query the date picker the event is called from by asking for its sibling.
$(document).ready(function(){
$('.dTo').click(function(){
var from = $(this).siblings('.dFrom').datepicker("getDate");
$(this).datepicker("setDate",from);
});
});
I don't know your actual HTML structure so you may have to alter how the siblings are discovered, but hopefully you get the idea.
You need to get a little more relative with your selector syntax. I see you're using the id of each field -- is this shortened from the ASP.Net UniqueID? Because that's definitely not how it would look.
Rather than manually lookup the id, let ASP.Net make of it what it will and find them the jQuery way:
$(Function() {
$('input[id$=dFrom]').datepicker();
$('input[id$=dTo]').datepicker();
$('.panel').each(function() { //replace with appropriate selector syntax for your panels
$(this).click(function() {
var from = $('input[id$=dFrom]',this).datepicker("getDate");
$('input[id$=dTo]',this).datepicker("setDate",from);
});
});
});