I am using fullcalendar and I have trouble to give the 2 view buttons I use in the header a unique name. Both Timelineday and agendaDay view give me the default value "Day" and that is confusing.
If I use buttonText property as mentioned here: http://fullcalendar.io/docs/text/buttonText/ to change the buttons, I can only rename both buttons at the same time and not just one.
Who knows the solution?
To assign a custom name to a button you place your buttons on the header and then with that name you assign them with buttonText.
header: {
left: "month,agendaWeek,agendaDay today prev,next",
center: "title"
},
buttonText: {
agendaWeek: "Custom Agenda Week Title"
}
Related
I'm using FullCalendar's background events to implement blocked dates and days in my application.
But I cannot find any option to edit or select the background event from the calendar. For example how can i drag or resize background events?
Also it appears clicked events doesn't register on background events so i'm not able to select and delete them.
I have tried setting the editable field on the background event to true but it appears it doesn't have any effect.
events: [
{
start: '2019-04-11T10:00:00',
end: '2019-04-11T16:00:00',
rendering: 'background',
color: '#ff9f89',
editable : true
},
{
start: '2019-04-13T10:00:00',
end: '2019-04-13T16:00:00',
rendering: 'background',
color: '#ff9f89',
editable: true
}
]
I was expecting that I could use the editable property to allow editing the background event but it doesn't the event is still not editable.
I need a tooltip for each items the problem is that when I put for example :
title:'<b>Hover over me<b></br>test'the style is not applicated and so in the tooltip the result was <b>Hover over me<b></br>test not Hover over me test.
I want to change the style of every title in the tooltip .
please have you any ideas
Without some further information, it seems you are in the correct path.
As per documentation:
title - string - "Add a title for the item, displayed when holding the mouse on the
item. The title can be an HTML element or a string containing plain
text or HTML."
Working sample below:
var data = new vis.DataSet([{
id: 2,
content: 'Pi and Mash',
start: '2014-08-08',
title: '<b> Bold title </b> <br> Not bold'
},
...
var timeline = new vis.Timeline(container, data, options);
http://jsfiddle.net/sm4r5pvc/
Update vis version. In the older version, we don't have the tooltip. Make sure you are working with v4.21.0 and above
When using isRTL : true
shouldn't the week and day view - hours column - display on the right side ?
i'm using it like that
$(document).ready(function () {
flag = !1;
$("#Xcalendar").fullCalendar({
theme: !0,
isRTL : true,
header: { left: "next,prev today", center: "title", right: "month,agendaWeek,agendaDay" },
I'm using version 1.5
I have tested in my calendar and the month view is displayed Rigt to Left but the week and day view are displayed in the default way LTR...
I am using the 1.6 version, so i guess its suposed to be like that...
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}
I have two Ext.menu.CheckItem's in a group. How would I change the checked item's disc icon to something else? I would like to retain the radio button functionality (only one selected), but have a check mark instead of the disc.
var options = new Ext.Button({
allowDepress: false,
menu: [
{checked:true,group:'labels',text:'Option 1'},
{checked:false,group:'labels',text:'Option 2'}
]
});
You can achieve that effect (radio controls that look like check boxes) by setting the inputType configuration option to 'checkbox':
var options = new Ext.Button({
allowDepress: false,
menu: [
{inputType:'checkbox',checked:true,group:'labels',text:'Option 1'},
{inputType:'checkbox',checked:false,group:'labels',text:'Option 2'}
]
});
As an example, here are two screenshots that show the effect of inputType:'checkbox':
First screenshot http://www.freeimagehosting.net/uploads/2f662f202c.png
Second screenshot with the "Red" option http://www.freeimagehosting.net/uploads/66c002aad2.png
I modified Ext JS' Checkbox/Radio Groups demo and only added the option to the "Red" radio component configuration.