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/
Related
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
I am facing an issue with fullcalendar, I am trying to change the color of complete column of specific dates. I have tried this, but it's changing on only day cell color, I want to change complete column color of that specific date
dayRender: function (date, cell) {
var today = moment('2018-12-28T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background", "#EEEEEE");
//cell.addClass('fc-selectable-false');
}
}
By rendering property for event object to "background",
something like this,
$('#calendar').fullCalendar({
defaultDate: '2018-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2018-12-10T10:00:00',
end: '2018-12-10T16:00:00',
rendering: 'background'
}
]
});
for more information please see fullcalendar documentation: https://fullcalendar.io/docs/background-events
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 have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.
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.