I need to show an image in cells based on the event feed. If any data available for particular date, then an image will be displayed in center of cell. If not it should display default image in center of cell. I tried with following code. But I was successful to place image but not center/where the event data is replaced. And also I the "cross" image should be visible only for validRange
Required format is shown in image 3. Please help. Thanks.
img = "images/cross.png";
$('#calendar').fullCalendar({
contentHeight: 380,
weekNumbers: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
events: feeder,
businessHours: true,
aspectRatio: 1,
defaultView: 'month',
showNonCurrentDates: false,
validRange: {
start: '2018-08-01',
end: moment()
},
eventRender: function (event, eventElement, view) {
if (event.imageurl) {
eventElement.find("div.fc-content").html("<img src='" + event.imageurl + "' width='25' height='28'>");
} else {
eventElement.html("<img src='" + img + "' width='25' height='28'>");
}
},
dayRender: function (date, cell) {
cell.html("<img src='" + img + "' width='15' height='20'>");
}});
Related
When displayEventTime: true the times show on the events and when the events are dragged or resized the time accurately change in real time on the event. What do I need to add to my code to have the Tooltip popup change the time accurately in realtime as well? Variables line1 and line2 is the start and end time. CodePen link provided below, Thank you
var tooltip = new Tooltip(info.el, {
title: line1 + " " + line2,
placement: 'top',
trigger: 'hover',
container: 'body'
});
// events can have multiple parts, so make an array for each event and add all it's tooltips
var tooltips = info.event.extendedProps['tooltips'] || [];
tooltips.push(tooltip);
info.event.setExtendedProp('tooltips', tooltips);
},
eventWillUnmount: function(info) {
for (var tooltip of info.event.extendedProps['tooltips']) {
tooltip.dispose();
}
}
https://codepen.io/asilver666666/pen/ExgPZaV
I have FullCalendar up and running on my site with the events being pulled from google calendars. It all works great, except when I switch to the yearList view. Yes it shows all of the events properly, but I was wondering if there is a way to have it focus on the closest event to the current date
i.e. it's July and when you switch to listYear view it starts at January.
I don't want to disable past events or anything like that.
So I guess the question is: Can you get the closest event to the current date, and have the list scrollTop to that event?
Any help would be greatly appreciated!
in action:
www.pvband.org/schedule/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
displayEventTime: true,
displayEventEnd: true,
//removed google api key and cal events for this snipet
eventClick: function(event) {
if (event.url) {
var fancyContent = ('<div><div class="eventDetailsHeader">Event Details</div> <div class="eventDetails"> <label><b>Event: </b></label>' + event.title + '<br>' + '<label><b>Date: </b></label>' + event.start.format('ddd, MMM DD, YYYY') + '<br>' + '<label><b>Start Time: </b></label>' + event.start.format('h:mm a') + '<br>' + '<label><b>End Time: </b></label>' + event.end.format('h:mm a') + '<br>' + '<label><b>Location: </b></label>' + event.location + '<br>' + '</div></div>');
$.fancybox.open({
src : fancyContent,
type : 'html',
})
return false;
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
H,I am using the KendoUI window and I am getting an issue as i have to open 3 Pop up window that contains divs as a Content in it but of different heights.if I select first one say of height 100px and close it and open the second window of height say 200px,it remains at 100px and hence hiding the content of the second popup window and when i resize the window and close it and when again open it,it remains at the previous dimension that i had resized it.
Why this is happening,not getting any clue on this.Please help me.
if (AccountType == "Bank") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: {AccountID:AccountID},
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '200px',
scrollable: false,
//deactivate: function () { wnd.destroy(); }
}).data('kendoWindow').center();
wnd.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Bank Account Edit");
}
});
}
if (AccountType == "Cash") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: { AccountID: AccountID },
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd1 = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '360px',
scrollable: false,
//deactivate: function () { wnd1.destroy(); }
}).data('kendoWindow').center().open();
//wnd1.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Cash Account Edit");
}
});
}
<div id="Update_Window" style="display:none;"></div>
As you said: you close it, you did not destroy. Closing a window means hiding it but it is still there with the same content and attributes.
You should not use $('#Update_Window').empty(); since this releases the DOM but not the Kendo Window so it will cause a memory leak. Instead of that, use: destroy.
$('#Update_Window').data("kendoWindow").destroy();
Anyway, my recommendation is not creating and destroying windows since this has some impact in performance, you should try to reuse it.
I've been trying to learn Sencha Touch and I'm stuck on something that is probably pretty obvious. I'm trying to update a tabPanel with a button event. I'd like for a tap on the first button to load 'maptestPanel' in the same panel. This is a map loaded from its own js file.
The map panel looks ok by itself:
maptestPanel = new Ext.Panel({
layout: 'fit',
fullscreen: true,
items: [map]
});
But I'm not seeing how to properly place it in the tabPanel
The code is:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var navBar = new Ext.Toolbar({
dock : 'top',
title: 'Some App Name',
});
var topPanel = new Ext.Panel({
dockedItems: [navBar],
fullscreen : true,
//html: 'Test Panel'
});
var tapHandler = function(button, event) {
btnPanel.update(maptestPanel); //I'm sure part of the problem is here
}
var SomeDate1 = new Ext.Button({
text:"Some date",
minWidth:200,
height: 45,
cls:"listButtonTop",
handler:tapHandler
});
var SomeDate2 = new Ext.Button({
text:"Another Date",
minWidth:200,
height: 45,
cls:"listButton"
});
var SomeDate3 = new Ext.Button({
text:"And Another Date",
minWidth:200,
height: 45,
cls:"listButtonBottom"
});
var btnPanel = new Ext.Panel ({
id: 'date',
items: [SomeDate1,SomeDate2,SomeDate3],
});
var tabpanel = new Ext.TabPanel({
layout: 'card',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Maps',
//html: '<h1>Place holder</h1>',
iconCls: 'maps',
cls: 'card1',
items: [btnPanel]
}, {
title: 'Favs',
html: '<h1>Place holder</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit'
//items: [SomeList, SomeOtherList, AnotherList]
}, {
title: 'Info',
html: '<h1>Place holder</h1>',
cls: 'card4',
iconCls: 'info'
}]
});
}
});
Thanks for any advice or a steer in the right direction.
There's several things you need to do to fix up that code:
1) 'Maps' has no layout. Since it has a single child item, layout: 'fit' would be appropriate here.
2) Only use fullscreen on the outermost item, you don't want the other items to be fullscreen since they are child items of other containers.
3) To dynamically add items to a container, use the add() method on container. You'll also need to call doLayout() to trigger a layout for the container.
btnPanel.add(maptestpanel);
btnPanel.doLayout();
However, in this case I don't see why you're adding the map to a panel, it doesn't give you any extra functionality. Instead, I would add the map directly to the btnPanel.
4) The btnPanel has no layout either, so you'll need to choose an appropriate layout there as well, possibly the vbox layout.
I only know "classic" sencha, but this should work the same way : So you could just add the mapPanel (but hidden) to your tabPanel, and in the button handler show it while hiding the button panel.
Besides, speaking of layouts, I don't think you need to precise layout:'card' in tabPanel since it uses a card layout by definition
I want to show the data in the tooltip when a columns has long sentences because of width constrints.
For this I am using a renderer function as follows
{
header: xppo.st('SDE_INCIDENT_DESCRIPTION1'),
width: 175,
sortable: true,
groupable: false,
dataIndex: 'IncidentDescription',
renderer: function(value, metaData, record, rowIndex, columnIndex, ds) {
return '<div ext:qtip="' + value + '">' + value + '</div>';
}
},
But when the data has no break space and when the word is really long the text will extend beyond the text area.
How do I show the entire data within the div specified without overflowing from it.
Ext.apply(Ext.QuickTips.getQuickTip(), {
maxWidth: 700,
minWidth: 100,
showDelay: 50,
trackMouse: true
});