Is it possible to disable specific event (Not whole calendar events) re-size.
For example, I have one demo external event drag to the calendar, I have put two different menu for drag event one is red colored and another is with green color. I have applied following flags for some of the specific features like.
eventOverlap: false,
editable: true,
disableResizing: true,
eventDurationEditable: false
Now what I need to do is, Is it possible to enable to re-size to a green colored event ?
For events you wish to be resized, you can do so by adding property durationEditable = true to the event object:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
eventOverlap: false,
editable: true,
disableResizing: true,
eventDurationEditable: false,
events: [{
title: 'Resize me',
start: moment(),
end: moment().add(75, 'minute'),
durationEditable: true /* This event can be resized! */
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js"></script>
<div id='calendar'></div>
Related
In my FullCalendar rendering I use the dayGrid view to create a schedule. When populating this calendar view (schedule) with events, every event is the same height, regardless of the duration of the event. I would like to make the events bigger or smaller based on their duration, similar to what the FullCalendar demo shows for other calendar views. Is this possible to achieve using the dayGrid View?
My Calendar:
FullCalendar Desired Styling:
In v5 find in the CSS file .fc-h-event and add the height option. This is mine:
.fc-h-event { /* allowed to be top-level */
display: block;
height: 70px !important;
border: 2px solid #3788d8;
border: 2px solid var(--fc-event-border-color, #3788d8);
background-color: #3788d8;
background-color: var(--fc-event-bg-color, #3788d8)
}
I ended up finding a way to accomplish my goal. The CSS styling for the calendar rendering can be modified right in the html page using:
<style>
.fc-day-grid-event > .fc-content {
white-space: normal;
}
</style>
This allows the text of the event title to wrap onto multiple lines. Without modifying this styling the event text (title) just cuts off anything longer than the width of the event box.
Once this styling is in place, I can just insert newline characters ('\n') into my html in order to expand the size of the box. Because I am controlling my events from a database, it is easy to simply add newline characters into the title string corresponding to the desired size of the event.
Here is what my calendar looked like before:
And here are some sample events to recreate the image:
events: [
{
id: 'event1',
title: 'Event 1- 5h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
Here is what the calendar looks like using my solution:
And the simple modification to the events needed for this solution:
events: [
{
id: 'event1',
title: 'Event 1- 5h' + '\n\n\n\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h' + '\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
I have two different events an event should appear in red calendar another should be blue. My example below.
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventSources: [
{
url: 'read_simply.php',
color: 'red',
textColor: 'white'
},
{
url: 'read_recurring.php',
color: 'blue',
textColor: 'white'
}
],
theme: true,
selectable: true,
selectHelper: true,
droppable: true,
Here you can see how the sources are integrated.
Everything works until a little problem. My different events are stored in two different MariaDB tables. Some events have the same "event ID". When I try to move a (red) event to calendar, blue event with the same ID is also moved. How can I correct it???
I believe this is the expected behaviour. fullCalendar assumes that events with the same ID are linked and treats them as such.
I would suggest not to use the "id" property for your database IDs (you can just not provide this property, and fullCalendar will create a unique internal ID for itself on each event), and instead set some custom property e.g. serverID on your event so that you have a way to link it back to your database, but without causing problems within fullCalendar.
I am using an old installation of 1.5.3 in a bootstrap-based system.
I am loading a page via ajax, that contains a fullcalendar instance - in weekly view.
This is only the case in Chrome - looks find in Firefox/Explorer.
Note: the ajax page that I bring in does NOT have <!DOCTYPE.... header tags - rather, its just plain INNER HTML code - along with the relevant css/js for fullcalendar
this is my basic code:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
theme: true,
weekends: false,
weekendDays: [5,6],
header: {
left: '',
center: '',
right: ''
},
allDaySlot : false,
firstHour: 8,
minTime: 8,
maxTime: 23,
columnFormat: {week: 'ddd'},
editable: false,
events: [
.....
]
});
Chrome: example: https://i.stack.imgur.com/i6tei.png
Firefox example: https://i.stack.imgur.com/bM5Uy.jpg
How do I indicate an event as being a background event within a JSON feed (which I'm creating through AJAX). It is being rendered as a regular event, not a Background event.
JSON Feed:
[{"id":"availableForMeeting","start":"2015-02-04T09:00:00","end":"2015-02-04T20:00:00","rendering":"background","overlap":true},{"title":"Working","start":"2015-02-04T10:00:00","end":"2015-02-04T12:00:00","allDay":false,"overlap":true},{"title":"Lunch","start":"2015-02-04T12:00:00","end":"2015-02-04T14:00:00","allDay":false},{"title":"Working","start":"2015-02-04T14:00:00","end":"2015-02-04T19:00:00","allDay":false}]
You can do this in FullCalendar 2.2+ using Background Events by adding rendering: 'background' to the event (documentation). In the example below, it'd be the same for the JSON feed.
Since you stated you are indeed using rendering: 'background', I would check that
1) You are using the correct version of FullCalendar
2) There are no errors on the page
3) If neither 1 or 2, post a code snippet that shows your problem, since the one below works fine:
Also note that per the docs:
Background events that are timed will only be rendered on the time
slots in agenda view. Background events that are all-day will only be
rendered in month view or the all-day slots of agenda view.
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event',
start: moment().add(3, 'h'),
end: moment().add(5, 'h'),
color:'#ff0000',
allDay: false
}, {
start: moment().add(1, 'h'),
end: moment().add(10, 'h'),
rendering: 'background'
}, {
title: 'Other Event',
start: moment().add(6, 'h'),
end: moment().add(8, 'h'),
color:'#00cc00',
allDay: false
}],
header: {
left: '',
center: 'prev title next',
right: ''
},
timezone:'local',
defaultView: 'agendaWeek'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>
<div id="fullCal"></div>
I need to add two calendar jQuery objects to the html page. I have the below setting for date picker. Have an icon image for opening the calendar object. For absolute positioning the icon image doing the below css ui-datepicker-trigger override. If i have two calendar objects how can i create two overrides for the class because the name of the override class naming convention doesn't to have a id name . Pasted the code in http://jsfiddle.net/y6DDh/
.ui-datepicker-trigger {
position:absolute;
left:330px;
top:300px;
}
$("#datepicker").datepicker({
//showOn: both - datepicker will come clicking the input box as well as the calendar icon
//showOn: button - datepicker will come only clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
$("#datepicker2").datepicker({
//showOn: both - datepicker will come clicking the input box as well as the calendar icon
//showOn: button - datepicker will come only clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
For the first one:
#datepicker + .ui-datepicker-trigger {
position: absolute;
left:330px;
top:300px;
}
For the second:
#datepicker2 + .ui-datepicker-trigger {
position:absolute;
left:530px;
top:300px;
}
Example: http://jsfiddle.net/y6DDh/1/