I am using fullcalendar in the agendaWeek view. I noticed that events that are in a single slot, lets say 30 min, do not display the endtime. The endtime only apears on events that cover more than one slot.
All the options that I've found did not add that to the event title.
Is that possible and I just didn't see it?
Thanks for any suggestions!
EDIT:
This is the Tool I am referring to.
http://fullcalendar.io/
In the function renderEventTable there is a condition that adds a css class if the event is smaller than 30px.
if (seg.bottom - seg.top < 30) {
seg.el.addClass('fc-short');
}
So basicly you can just edit the CSS style for .fc-short.
fc-time-grid-event.fc-short .fc-time span {
display: none; /* don't display the full time text... */
}
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-start); /* ...instead, display only the start time */
}
.fc-time-grid-event.fc-short .fc-time:after {
content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
}
I agree that just modifing the style where you need it makes more sense but #Abdullah provided only half the solution. Don't forget to clear the trailing - in the :after section of .fc-time
.fc-time-grid-event.fc-short .fc-time:before {
/* in short mode, only data-start and data-full are available */
content: attr(data-full);
}
.fc-time-grid-event.fc-short .fc-time:after {
/* remove the trailing - after you change the content from data-start to data-full */
content: "";
}
.fc-time-grid-event.fc-short .fc-title:before {
content: "\00a0"; /* when a title exists along with the short time pad it with something like a nbsp*/
}
An easy and better solution that worked around was to simply add css.
which will show [start time] - [end time] [title]
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-full); /* ...instead, display only the start time */
}
Related
The Kendo grid I developed has a validation message, but the arrow points to the column to the right. I cannot change anything in /kendo.default.min.css as this is located in a shared folder which should not be changed. Any help on this?
dataSource: {
data: data.ReportData,
schema: {
model: {
fields: {
ProposedDiscount: {
validation: {
required: true,
proposeddiscountcvalidation: function (input) {
if (input.val() != "" && input.is("\[name='ProposedDiscount'\]")) {
input.attr("data-proposeddiscountcvalidation-msg", "Should be whole number between 0 & 100");
// $('.k-widget k-tooltip k-tooltip-validation k-invalid-msg .k-icon k-warning .k-tooltip-validation .k-callout-n').removeClass('.k-callout-n');
return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
} else {
return true;
}
}
}
}
You could try simply overriding some of the styles on the validation tool-tip. This works for me, though I've scoped it pretty tight to try to avoid any unexpected effects elsewhere. You might need to modify it slightly, depending on what version of kendo you're using:
<style>
.k-grid .k-grid-content tr.k-grid-edit-row>td[role='gridcell'] .k-tooltip-validation>.k-callout-n {
left: auto;
margin-left: auto;
}
</style>
Edit: I've just noticed you said you "cannot change anything in /kendo.default.min.css" - you shouldn't need to. This should override the default styles provided by kendo in that file. If you've got your own site-wide CSS file you could add it to that, or even just add it directly to the page hosting your grid (though that's not really recommended). Hope this helps.
The Kendo style default displays the tooltip and places the callout (arrow) in the center of the tooltip. If the message is wide enough, like in your example, because the arrow is in the center it ends up pointing to the wrong cell. If you constrain the tooltip to the width of the cell it will wrap the message and keep it constrained to the cell width, which means the centered arrow will line up.
.k-validator-tooltip { width: min-content; }
I would like to remove a complete line of days in the scheduler (Month View) when all the days in the line belong to an other month.
ex1:
In this exemple i want to remove the first line (25 to 31) because they belong to the other month completly, but we want to keep the (1 to 4) in the last line.
ex:2
In this exemple i want to remove the last line (5 to 11) because they belong to the other month completly, but we want to keep the (29-31) in the first line.
I didn't find anything to help me achieve this task. Anyone know if there is a way to do it?
EDIT
Based on #himawan_r answer's, i did this to remove the line.
$(".k-scheduler-table tr").each(function (index, element) {
if (index === 0) return;
var shouldBeHidden = true;
$(this).find("td").each(function (i, elm) {
if (!$(elm).hasClass("k-other-month")) {
shouldBeHidden = false;
}
});
if (shouldBeHidden) {
$(this).hide();
}
});
now the problem is that Kendo render the events on the wrong cell, and sometime it's overflowing on 2 cell.
I don't know if we can tell Kendo to rerender only the events, because when i rezise the element, it's fixing the issues.
I would like to give a suggestion by utilizing :
Make use of scheduler dataBound event to hide the date and event (not work yet on recurring event)
In the scheduler edit function add conditional to to prevent the popup to appear if they click on date that is hidden
take a look at this dojo
Brief explanation (check this part of the code)
dataBound: function(e) {
//since if we hide the <td> the current month date will be be shifted to the left,
//instead hide all the date <span> on all k-other-month <td> or more specific,
//however you mentioned about completely belong to other month, maybe you could create more specific selector
$("td.k-other-month span").hide();
//we cant hide the event using $("td.k-other-month div").hide() since the event element not inside the td
//you can hide it this way, however
//in this example the event is recurring thus i cant find any event that is outside of this month scheduler create multiple event based on recurring rule
//if there is only common event i think this code will work
var data = e.sender.dataSource.data();
var currentMonth = e.sender.view()._firstDayOfMonth.getMonth();
for(var i = 0; i< data.length ; i++){
if(data[i].start.getMonth() !== currentMonth){
$("div.k-scheduler-content div[data-uid='"+ data[i].uuid +"']").hide();
}
}
}
and
edit: function(e) {
//here i add conditional to prevent the edit/new event popup to appear if it is outside of current month
//you can create your own logic if needed
if(e.event.end.getMonth() !== e.sender.view()._firstDayOfMonth.getMonth()){
e.preventDefault();
}
},
then you can apply your requirement from there i guess.
you can hide those dates using CSS
.k-other-month {
background-color: white !important;
position: relative;
z-index: 1;
}
.k-other-month .k-nav-day {
color:white !important;
}
I have added filterable: true for kendo ui grid. The grid is getting filtered correctly.
What I want is when the filter icon is clicked the filter icon should be filled with some different color or may be the color should be changed for filter icon inidcating that the column filter icon is clicked.
Please tell how to this.
In my case the following css did it, easy and simple.
.k-grid-filter.k-state-active {
background-color: #d2691e;
}
Some of the themes do this, but at least the Metro one doesn't, if that's the one you're using too.
(with LESS)
.k-grid {
/* Also changes the group row background color */
.k-grouping-row > td {
background-color: #c5c5c5;
}
.k-grid-header {
.k-grid-filter.k-state-active {
background-color: #7ea700; /* Default metro active color */
/* White icon */
.k-icon.k-filter {
background-position: -48px -80px;
}
}
}
}
I grab the kendo.metro.less file, stick that (plus a few others) at the end.
This is supported out-of-the-box. Take a closer look at the demos when you filter change the theme if needed. Or modify the CSS of a particular theme to make it more clearly visible.
My Footer is not fixing in my Windows mobile app.
code :
.newFooter {bottom:0; position:absolute !important; width:100%;}
Note: This codes works for Android,BB,Ios.
Can any one help me with some Good Solution.Thanks.
Solution :
/* Start - Used to display the footer at the bottom of the page */
html,
body {
margin:0;padding:0;height:100%;
}
#container {
min-height:100%;position:relative;
}
#header {
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;position:absolute;bottom:0;left:0;
}
/* End - Used to display the footer at the bottom of the page */
Is it possible to disable the pagination (First, Previous, Next, last) links in the tablesorterpager plugin of jQuery. This is my code in jQuery
jQuery('#mentor_engagement_report_table')
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({container: jQuery("#pager"), positionFixed: false,size:10});
I've created a fork of the tablesorter plugin on github. After reading this question, I added a new option to the pager plugin named updateArrows which when true it applies a class name, contained in the new cssDisabled option to the arrows. Here is the initialization code and a demo:
$("table")
// initialize tablesorter
.tablesorter()
// initialize the pager plugin
.tablesorterPager({
// target the pager markup
container: $("#pager"),
// disabled class name to use
cssDisabled : 'disabled',
// apply disabled class name to the pager arrows when the rows at either extreme is visible
updateArrows: true
});
And here is some example of css used in the demo:
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
#pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
#pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}
There is only pagination if you use the Pager Plugin, if not, not a thing will have pager part...
if you would like just to hide the pager
after your javascript code add:
$(".pager").hide();
Your question should be, Why do i want to hie the pager area? if I only want to shown 10 rows, the data should only contain 10 rows ...
It would be easier if you posted your whole code, and be more clear to what you want.
do you still want to select the row count per page?
then try this: http://jsfiddle.net/q66TA/
If you don't want anything from the pager, don't use it..
Update:
If you need the current page number and the total page count, you'll need to add this functionality to the plugin. There is a callback addon/patch available for this:
http://www.vinertech.com/patches/tblsorter.pager.cbk.patch
More on this: http://daveviner.blogspot.com/2009/12/jquery-tables-and-administrative.html
The best way, and what we use on all our's that require a view all button, is to use the plugin itself's way of disabling it.
This is brought directly from their site http://mottie.github.io/tablesorter/docs/example-pager.html
The code used is real simple actually:
// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + ' Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
<button type="button" class="toggle">Disable Pager</button>