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
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
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
}
]
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>
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>
my jgGrid appears correctly, but the icons on the Navigator button are not appearing. There is an outline to the buttons and a tooltip when you hover over them, but no icon on the button, like a "+" or trash bin.
Also, is there a way to hide certain buttons and not others, like remove the add record butoon, but leave the delete record button.
I have followed the instructions relating to the style sheets and language files.
Below is the code that creates a grid:
// create the grid
$(gridName).jqGrid({
// server url and other ajax stuff
url: '/Admin/Blogs',
datatype: 'json',
mtype: 'GET',
height: 'auto',
shrinkToFit: false,
// columns
colNames: colNames,
colModel: columns,
// pagination options
toppager: false,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
// row number column
rownumbers: true,
rownumWidth: 40,
// default sorting
sortname: 'PostedOn',
sortorder: 'desc',
// display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false }
});
$(gridName).navGrid(pagerName,
{
// settings
cloneToTop: true,
search: false
},
{}, // add options
{}, // edit options
{} // delete options
);
Make sure your page got jquery-ui.js and jquery.ui.theme.css with icons images in your css/images folger.
About hiding some buttons:
$(gridName).navGrid(pagerName,
{edit:false,search:false,del:true,add:true,view:false,refresh:false,cloneToTop: true},
// navigator options ( where true = show / false = hide )
{}, // add options
{}, // edit options
{} // delete options
);
if you will add custom buttons, just give them id and hide :
$('#buttonId').hide();
By adding jquery.ui.theme.css with the theme images folder everything worked.