The main difference between timeGrid and dayGrid views is that the former has a box as representation instead of a line. Here there is the dayGridMonth (a dayGrid without boxes):
instead, the same with timeGridWeek looks like:
I need a month view that shows boxes with full text for each event. Something like a timeGridMonth. How can I get it with fullCalendar v5?
Added: This is a month view in fullCalendar v1. I am looking for something similar to this that shows full text on events:
To have a result similar to v1 monthViewview, you have to change two small pieces of code.
In the config, you have to set the eventDisplay to block as suggested by #ADyson in comments (ref).
In the stylesheet, you have to add this:
.fc-daygrid-event {
white-space: normal !important;
}
.fc-h-event .fc-event-time {
overflow: unset !important;
}
With this two small changes, you'll have the expected result:
Related
I am using IAjaxIndicatorAware for a panel containing several elements able to call AJAX. The indicator shows currently under the panel and I need to change its position - how should I do that?
If you use IAjaxIndicatorAware then you have a Wicket Component that implements IAjaxIndicatorAware. In that case Wicket just makes the HTML element with id == IAjaxIndicatorAware#getAjaxIndicatorMarkupId visible by using jQuery.show($('#indicatorId')). This HTML element is placed by you somewhere in your page so you have full control on it. For example you can add CSS rule like:
#indicatorId {
// padding: ...
// margin: ...
}
But if you use org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender then you should use the CSS class returned by org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender#getSpanClass() as a CSS selector.
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
I would like to know if there is a way to duplicate the cursor in my website so it appears twice, say as if you are seeing it drunk. I would like it to keep being responsible to images and change, but always double... is it possible to do this in an easy way? my CSS is pretty basic... thanks in advance!
This is an example: https://s11.postimg.org/ba76nmrvn/cursor_1.png
You can make some image and define it as cursor like this:
body {
cursor: url(path/to/your-arrows.png);
}
Doesn't need to be the body, you can define this for any HTML element.
You can load custom images, but don't forgot to always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
body {
cursor:url(double-arrows.png),url(anotherCursor.cur),auto;
}
I am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:
The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.
I have tried adding this to the CSS:
.k-popup .k-calendar {
font-size: 10px !important;
}
And the result was odd:
It only worked partially because only the month name was reduced, the numbers remained large...
The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.
EDIT
I tried to add the k-calendar class:
#(Html.Kendo().DatePicker()
.Name("concessionTOD")
.Start(CalendarView.Month)
.Value(DateTime.Now)
.Format("yyyy-MM-dd")
.Culture("pt-PT")
.HtmlAttributes(new { #class = "k-calendar" })
)
but the result was this:
you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.
EDIT 2
I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:
So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.
Also, I found in the documentation that
Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
I'm not sure how to interpret the second sentence but it may help in dealing with the issue.
Use the following CSS selector / definition:
.k-calendar {
font-size: 10px;
}
Check the following code snippet.
$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
title: "window with datepicker"
});
.k-calendar {
font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="win">
<input id="datepicker" value="10/10/2011"/>
</div>
OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.
So, I removed my iFrame setting from the Kendo Window:
#(Html.Kendo().Window()
.Name("addConcessionWindow")
.Modal(true)
//.Iframe(true)
.Visible(false)
)
and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).
Bottomline is:
it is not possible to have an overflowed iframe.