Is it possible to put a standard text on lines that do not have events?
You could add a title to a background event
{
id: '1',
resourceId: '123',
start: '2021-03-07T02:00:00',
end: '2021-03-07T06:00:00',
rendering: 'background',
title: 'my background title'
}
then in eventRender you could output it to the screen, inside the event block
eventRender: function (event, element) {
if (event.rendering == 'background') {
element.append(event.title);
}
}
then you could use CSS to gain control of how it looks.
https://fullcalendar.io/docs/background-events
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.
I have my google calendar synched to Fullcalendar, and am rendering its events as 'background'
eventSources: [
{
googleCalendarId: 'calendarname#group.calendar.google.com',
color: '#e7e7e7',
rendering: 'background'
},
I would like to display the event's time as a block on top of the background color. (im in month view)
If you use the "eventRender" callback you can set any text you like on the event's HTML element:
eventRender: function(event, element, view)
{
if (event.allDay == false)
{
element.css("color", "red");
element.css("font-weight", "bold");
element.css("font-size", ".8em");
element.text(event.start.format("HH:mm"));
}
}
Demo: http://jsfiddle.net/qxLuLhsf/18/
I'm using Fullcalendar with a Google Calendar so I can't apply a class to an event as far as I'm aware.
What I want to do should be quite simple and I'm sure the answer will involve eventRender but I just can't get it working.
Simply: change the entire background color of the cell that contains any event (all events are "all day" within the Google Calendar).
What I'm trying to achieve is an "availability" state; any event is "unavailable" i.e. background color red.
Yes, you can do it with eventRender. You'll have to find the td that contains that event. If you inspect the fullCalendar, you'll note the tds have a data-date attribute for that particular day. That is how we will find the td that has an event in it so we can change the background color to red, specifically using:
eventRender: function (event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('activeDay');
}
In this example, the first line in eventRender uses moment to format the event start date into the format needed to match the data-date attribute value. The second line finds a td with the data-date attribute having a value of dataToFind and then adds a class we make up called activeDay, assuming you add something like this to your head/stylesheet:
<style>
.activeDay {background-color:#ff0000 !important;}
</style>
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event 1',
start: new Date(),
end: new Date(),
allDay: false
}, {
title: 'Main Event 2',
start: '2014-10-03 19:00',
end: '2014-10-03 19:30',
allDay: false
}, {
title: 'Main Event 3',
start: '2014-10-15 17:00',
end: '2014-10-15 18:00',
allDay: false
}, {
title: 'Main Event 4',
start: '2014-11-30 7:00',
end: '2014-11-30 18:00',
allDay: false
}, ],
header: {
left: '',
center: 'prev title next',
right: ''
},
eventRender: function(event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='" + dataToFind + "']").addClass('activeDay');
}
});
.activeDay {
background-color: #ff0000 !important;
}
<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.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<p>Example:</p>
<div id="fullCal"></div>
The answer of #MikeSmithDev does not work if you have events on multiple days.
If you have multiple days use this javascript:
eventRender: function (event, element) {
var start = moment(event.start);
var end = moment(event.end);
while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
var dataToFind = start.format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
start.add(1, 'd');
}
}
It uses the same principle as MikeSmithDev's, so you must use the same css.
I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}
I have a extjs button "Order" with menu items 'orderInsuranceMenu' for the button. I need to hide the menu items depeniding on some condition. How can i achive it
orderInsuranceMenu = {
id: 'menu-order-insurance'
,items: [
{
id:'btnMenu1',
text: 'Test Buton1',
iconCls: 'icon-cls',
listeners: {
click: function(b,e){
//some code goes here
}
}
}
,{
id:'btnMenu2',
text: 'Test Buton2',
iconCls: 'icon-first-title',
listeners: {
click: function(b,e){
//Some code here
}
}
}
]
};
Order = new Ext.Button({
text: 'Order '
, iconCls: 'icon-go'
, disabled: true
, menu: orderInsuranceMenu
, handler: function() {
}
});
I have tried this code but it doesnt work:
Ext.getCmp('btnMenu2').hide();
You can achieve this with the method setDisabled for the button. I.e:
Ext.getCmp('btnMenu2').setDisabled(true);
If you want to apply this for all items in your menu you can do this:
Ext.getCmp('menu-order-insurance').items.each(function(item) {
if (item.isXType('button')) {
item.setDisabled(true); // your condition here
}
});
Soloution:
In Extjs 2.2 there is no method to show or hide menu item by using isVisible
So after lot of digging and checking in firebug the final soloution I found was to hide or show the specific item as shown below
extManager.orderInsuranceMenu.items.items[1].hide();
orderInsuranceMenu.items.items[1].show();
You can use the setVisible method available in 2.2, in menu items. http://i.stack.imgur.com/kdw7f.png
If for some reason that does not work, I would resort to removing the item from the menu, and then adding it back into the menu when it is needed.