If you take a look at fullCalendar website, we are presented with a calendar.
If I attempt to drag the calendar's event, the events are always hidden behind the canvas' edges
Is there any way I can modify the CSS, so the events are popped up outside of the canvas?
The calendar can be found here: http://arshaw.com/fullcalendar/
Thanks in advance!
Add this to your CSS file:
div.fc-view.fc-view-month.fc-grid {
overflow: visible;
}
Related
I have a lot muti-day events, but they overlays other events makes them invisible.
Day date also get covered by events.
Is this issue with calendar rendering or styles, any suggestions?
My expectations for this scenario that day cell should be expanded vertically to let all events to be placed one-by-one.
Found a problem in my UI kit which had custom styling for FullCalendar, day frame height has been locked by custom css.
.fc .fc-daygrid-day-frame {
height: 190px;
}
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.
I am new to FullCalendar, downloaded and added to a php project. Added an event (hardcoded) as per the examples and it shows great except, the height of the event is so tall. It looks like there is padding above and below the text, nothing like all the examples I have seen where the events are nice thin blocks.
I have researched and found code to lower the height of the events but, when I do this it cuts off the bottom of the event time and title.
For example, I added .fc-event { height: 1em; } and it makes the events look more the all the examples BUT as I mentioned, it only cuts the event bottom and cuts off the bottom of the time and title (cannot read the event).
Here is a link to images http://snappdf.tumblr.com/
Using .fc-event changes the CSS for all events on your calendar. You might prefer using the className attribute of the event instead. This way you can customize individual events without impact.
Also, please post some code or better a jsfiddle to better understand the problem.
The flex title window component is nice and all, but before it shows up it insists on blurring out the background of your window if it's set to modal. What if I want it to just show up immediately or at least speed it up so that the user doesn't have to wait around to enter data. Am I going to have to build a custom component based on TitleWindow to get this or not have it be modal? If I were to do that could I extend current TitleWindow or just copy out the source directly?
Play with Application styles, such as modalTransparencyDuration.
Yes, you can apply those in the CSS:
global {
modalTransparencyBlur: 2;
modalTransparency: 0.8;
modalTransparencyColor: #000000;
modalTransparencyDuration: 500;
}
In your PopupManager set the modal to false.This will allow the user to interact with other popups.
PopUpManager.addPopUp(titleWindow, this, false);
i have an asp.net ajax hovermenuextender on a modalpopup panel to display a tip on hover.
the problem is the (tip) panel with the hovermenuextender appears below the modalpopupextender in IE8
this is a z-index issue, is there any place in the page where i can set the z-index for the hovermenu so that it appears over modalpopup,
i learnt that this change could be made in the PopupBehavior.js file from here:
http://ajaxcontroltoolkit.codeplex.com/workitem/26107
but i am using the Ajaxcontroltoolkit.dll in the project and its not possible to modify the ajax javascript source files.
thanks in advance.
I have running version AJAX 3.0 and adjusting the z-index did the trick. Thank you!
Make sure your PopupMenu container has higher z-index than the modal popup control. If you use Firefox with Firebug plugin you can find it easily when the page gets rendered. Just right click on the modal popup background -> Inspect element with Firebug -> on the right side swap to the "Computed" tab and you will find the current z-index in the object properties.
In the CSS classes for your Modal Popup and the Model Background you can try adding an overriding z-index entry that is less than the default for the hover menu popup. Something like:
.dialog {
z-index: 99 !important;
}
.dialog-bkg {
z-index: 90 !important;
}
Apply the "dialog" class to your modal popup panel, and supply the "dialog-bkg" class in the BackgroundCssClass property of the ModalPopupExtender.
I don't know if it will solve the issue with the hover menu -- but it may be worth a try.
BTW -- I just tested with version 4.1.404 of the Ajax Control Toolkit and I was able to use a hover menu on top of a modal popup without needing any changes...