I am implementing the timeline view of Full Calendar in my project, and although it works and looks great, the only issue I have is that in timeline Month view, the event bars do not wrap so half the text is cut off, especially so when the event only lasts a couple of days.
In Week and Day view, the text wraps fine - it's just in Month view. Is there any way to allow it to wrap the text? In certain cases there are notes added to the booking so they are pretty much unreadable in month view.
I'm using this code to add the description:
eventRender: function(event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
if(event.desc) {
var new_description =
'<br/><div class="fc-title">' + event.desc + '</div>'
;
element.append(new_description);
}
}
within my calendar params.
Here is a picture of what the entry looks like in timeline Month view:
And here is what it looks like in Day view (what I'd like it to look like):
If anyone can help with this I'd be grateful.
Just encountered the same problem, and this works for me...
.fc-event-time, .fc-event-title {
padding: 0 1px;
white-space: normal;
}
Related
im trying to make the content inside of an event in the Fullcalendar sticky. When you scroll in the calendar the content of the events should be visible as long as the event isn't out of the view.
I tried it with simple css but that doesn't work, see for yourself:
.fc-event .fc-content {
position:sticky;
top:0;
}
https://codepen.io/snak3/pen/KZKNMd
Has anyone an idea how to get this working or isn't it that easy?
It's not possible to use position:sticky out of the box, but here's an example of how you might go about it with js (add this to the end of your script):
const content = document.querySelectorAll('.fc-event .fc-content')[1];
const scroller = document.querySelector('.fc-scroller');
scroller.addEventListener("scroll", function() {
if (scroller.scrollTop > 100) {
content.style.position = "fixed";
content.style.top = "130px";
}
else {
content.style.position = "unset";
}
});
Obviously the selector and top values are very specific. You can use js to calculate the appropriate top distance for each event, and apply it for each scroll proc. That is a lot of work though.
My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?
I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.
i did the php like this data are all fine and are working good.
<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>
Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
Please take a look at jQuery gallery example.
I have events with a "buffer" time before or after like "prep work" or "driving time". I'm trying to figure out how to display this. Some pseudo code of my data:
{
start: 11am,
end: 11:30am,
preptime: 5 minutes
}
The ideal thing would be to show an event that starts at 10:55, but with a different style for those first 5 minutes. Can you think of any way to accomplish this?
If I understood your question, this will subtract prep time from start of event and shade it (percentage) differently than rest of event. Tested in Firefox 54, Chrome 58, Edge, IE11.
https://jsfiddle.net/wp3nyax7/
$(function() {
var preptime = 'preptime'; /* name of property that holds prep time (minutes!) */
$('#calendar').fullCalendar({
events: [{
title: 'Event 1 has prep time',
start: moment(),
end: moment().add(30, 'minutes'),
preptime: 5
}, {
title: 'Event 2 no prep',
start: moment().add(1, 'hour'),
end: moment().add(1.5, 'hour')
}],
eventRender: function(event, element, view) {
// if there is a prep time, calculate how much to shade and make gradient for it
if (event.hasOwnProperty(preptime)) {
var prep = event[preptime];
var length = event.end.diff(event.start, 'minutes') - prep;
var ppct = (prep / length).toFixed(2) * 100;
makeGradients(element, ppct);
}
},
/* subtract prep time (minutes!) from start of event */
eventDataTransform: function(eventData) {
if (eventData.hasOwnProperty(preptime)) {
eventData.start.subtract(eventData[preptime], 'minutes');
}
return eventData;
}
});
function makeGradients(element, ppct) {
/* gradient info found via http://gradcolor.com/css3-gradient.php */
/* All these prefixed editions may not be necessary? Didn't bother to find out */
var prefixes = ['', '-moz-', '-ms-', '-o-', '-webkit-'];
var color1 = '#992222',
color2 = '#229922';
var grad = 'linear-gradient(left, {color1} {pct}%, {color2} {pct}%)'
.replace('{color1}', color1)
.replace('{color2}', color2)
.replace(/{pct}/g, ppct);
$.each(prefixes, function(i, v) {
element.css('background-image', v + grad);
});
/* also -webkit-gradient(linear, left bottom, right bottom, color-stop(%,color1), color-stop(%, color2)) */
}
});
Thank you for the ideas! #smcd had the solution I needed then I started to better understand the data I've got and had to revise my thinking a bit. The gradient idea allowed the event to remain intact and be resized and dragged which is great.
The change in my data meant that the buffer time isn't a part of the start and end times. Instead it's an additional field. So a 9am - 10am appointment with a 5 minute buffer still needs to be read and written back as 9-10 rather than 8:55 - 10. This matches the customer experience as well since they are thinking of 9am - 10am events. They do need to see that there's additional time required.
My solution was to add classes to the events objects like: .buffer-5, .buffer-10, .buffer-15 to support 5 minute intervals. From there I use the slotWidth value to determine the size to display. Using :before I add a slightly transparent shaded region showing the "buffer" time.
This approach has one caveat: buffer times may overlap appointments rather than pushing them onto new lines. this might be desirable though.
In the end, the buffer data is being treated more like helper text so I think it's the right solution.
Thank you!
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})
I have a chart that displays a tooltip (string) when hovered over. Is there a way to control the delay/time the tooltip is displayed to the user?
<asp:Chart runat="server" ID="Chart2" Width="340px" Height="265px">
<!--Define Things in here-->
</asp:Chart>
Backend:
//define what rec is
string tooltip = rec;
Chart2.ToolTip = tooltip;
I just came up with a pretty simple solution to this classic problem with the help of some Javascript I borrowed from here: http://bonrouge.com/~js_tooltip
Asp.NET renders tooltips as a title attribute on the actual HTML page generated. You can take advantage of this fact to apply whatever style you like to the tooltip by overriding it with two very simple javascript functions.
function showTooltip(control) {
var ttext = control.title;
var tt = document.createElement('SPAN');
var tnode = document.createTextNode(ttext);
tt.appendChild(tnode);
control.parentNode.insertBefore(tt, control.nextSibling);
tt.className = "tooltipCss";
control.title = "";
}
function hideTooltip(control) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Next you need to design your css for your tooltip:
position:absolute;
border:1px solid gray;
width:300px;
margin:1em;
padding:3px;
background: Red;
Finally you need to wire up the JavaScript to your control
Chart2.Attributes.Add("onmouseover", "showTooltip(this)");
Chart2.Attributes.Add("onmouseout", "hideTooltip(this)");
Hope this helps.... I've been looking for a SIMPLE way of doing Tooltips for all my Asp.Net stuff for ages. I don't like to declare my Tooltip code in separate spans or whatever as this is really no good for my dynamically generated stuff. Anyway I just wanted to add this somewhere online. Hope it helps someone out.
Sorry, but probably not.
Most tooltips are a browser feature, and display either the alt tag of an img, or the title tag of most elements. So the control of how long that tooltip displays is going to vary from browser to browser.
It's possible that the tooltip is under your control, and is an html element displayed with javascript on mouseover, or the charts and the tooltip might be in Flash or Silverlight, but if that's the case we'd need to see your code.
I'm guessing probably not. If you need more flexibility I would recommend going with a jQuery tooltip solution.
To add to Ravendarksky's answer: I used his code but if I moved my mouse during the mouseout event over the tooltip content, IE would issue an unhandled exception (no issues in Chrome, I did not check Firefox):
0x800a138f - JavaScript runtime error: Unable to get property 'nodeValue' of undefined or null reference
So I simply wrapped the implementation of hideTooltip in a conditional checking for null and all was well in IE [and Chrome]:
function hideTooltip(control) {
if (control.nextSibling.childNodes[0] != null) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Or you can use HoverMenuExtender of asp.net. You can also modify the pop up content/design.
Code reference sample here: http://asp-net-example.blogspot.com/2009/11/ajax-hovermenuextender-how-to-use.html