I am using the Jquery datepicker and everything is working fine and all styled how i want apart from any events i have in the database.
I would like any day that has an event to have a style using .my_class so instead of the default styling, it has a different colour. I would like this to apply for days that are in other months so if there's an event on the 1st of the next month, then style that.
I have used this to style the days of the other months to how i want but using something similar for the days with events doesn't work.
This works by changing the background colour of the other months
.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
background: #fff;
color: #b4b3b3;
}
This doesn't work
.ui-datepicker-other-month.ui-state-disabled .my_class span {
background: #f00;
color: #b4b3b3;
}
This is the jquery for the datepicker and adding .my_class to any table cells that have an event
var selected_dates = new Array();
// gets all the events from the database using AJAX
selected_dates = getSelectedDates();
$('#datepicker').datepicker({
inline: true,
dateFormat: 'yy-m-d',
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: function (date)
{
// gets the current month, day and year
// Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
var mm = date.getMonth() + 1,
dd = date.getDate(),
yy = date.getFullYear();
var dt = yy + "-" + mm + "-" + dd;
if(typeof selected_dates[dt] != 'undefined')
{
// puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
// the "true" parameter is used to know which are the clickable dates
return [true, " my_class"];
}
return [false, ""];
},
onSelect: function(date)
{
// puts the event's title in the dialog box
$("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
$("#dialog").dialog("option","title",selected_dates[date]['event_title']);
// puts the event's description text in the dialog box
$("#dialog").text(selected_dates[date]['event_description']);
// show the dialog box
$("#dialog" ).dialog();
}
});
Removed the space, maybe? Not sure what you rly mean tho..
.ui-datepicker-other-month.ui-state-disabled.my_class span {
background: #f00;
color: #b4b3b3;
}
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 a grid with row. I want to give a strike on click of particular button. Here is my code.
{
xtype: 'button',
text: 'Exclude',
handler : function(){
debugger;
var cohartgrid = Ext.getCmp('abc');
var cohartstore = cohartgrid.getStore();
var record = Ext.getCmp('abc').getSelectionModel().getSelected();
var st = cohartstore.getRange();
if (record) {
Ext.fly(row).addCls('row-deleted');// This line is not working.
}
if(record.data.EXL == "No"){
record.set("EXL","YES")
}
}}
What css I have to put. Thanks for help.
I answered same kind of question in other post. Here you need to get the index of your row and then place strike css by using addClass. remember extjs 3 is not supporting addCls
var selection = grid.getSelectionModel();
for(var i=0;i<gridstore.data.length;i++){
if(selection.isSelected(i)){
var test = grid.getView().getRow(i);
var dsd=Ext.fly(test);
dsd.addClass('StrikeCSS'); // Placing css to that perticular row.
}
}
In answer grid is your grid. In selection you getting row index and placing Strike
.StrikeCSS {
text-decoration: line-through !important;
color : BLACK !important;
}
Use code to add class in selected row :
rowIndex = cohartgrid.getStore().indexOf(selectedRecord);
cohartgrid.getView().addRowCls(rowIndex, 'row-deleted');
Rather than create events for Christmas and Easter and the like, I'd like to be able colour the date cells affected, and even perhaps have a grey translucent text for each event. Is there any easy way to do this in FullCalendar?
EDIT
It's been pointed out to me that fc-state-highlight is used to highlight fc-today, so perhaps a similar thing could be done, applying a css class to cells and defining it as "public holiday colour". A thought. The problem is how does one apply this class to the relevant dates such that it works within FC without breaking anything.
This could be done using eventAfterAllRender. Make a separate ajax call to find all of the holidays then change the color of the td. Example for month and holiday being June 1st, done with FC 2.0.1: http://jsfiddle.net/marcrazyness/C8jpm
eventAfterAllRender: function (view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for(var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name =='agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for(var i = 0; i < classNamesArray.length; i++) {
if(classNamesArray[i].indexOf('fc-col') > -1) {
$("td." + classNamesArray[i]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
when doc ready, have a js function to select all TDs, with data-date the ones you want, and add CSS class to them. I don't know if it works, just an idea.
Is there a way to make the day of the month value clickable in the month view like in Google Calendar?
I would like it so when a user clicks on a day in the month(just the day number, not the whole block), the fullCalendar would switch to the day view of that particular day.
Thanks!
Use the dayClick event, the changeView method, and the goToDate method.
Something like this (not tested):
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
// Clicked on the entire day
$('#calendar')
.fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
.fullCalendar('gotoDate',
date.getFullYear(), date.getMonth(), date.getDate());
}
}
});
Edit re: comments
You can check the event.target within the callback:
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
// Clicked on the entire day
if ($(jsEvent.target).is('div.fc-day-number')) {
// Clicked on the day number
$('#calendar')
.fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
.fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
}
}
}
});
Matt Ball's answer work great as long as you don't have fullCalendar's selectable option enabled. If you do, this doesn't work.
The problem is that an overlay div is created to represent the selection, and that overlay div becomes the jsEvent.target. It also messes with jQuery's .is(':hover') test -- the call will only return true for the topmost element, and the topmost element is the overlay.
My solution is to add my own overlay into the fullCalendar's overlay. My overlay is absolutely positioned to be in the upper right corner over the day number. In my onDayClick event handler, I can test to see if my corner overlay has :hover. If it does, I know the day number was clicked on.
Here's my Javascript:
// Called after the calendar layout has been rendered,
// but before events are added.
function onCalendarViewRender(view, element) {
// The .fc-cell-overlay div isn't created until a selection event happens.
// Force a selection event to trigger the creation of this div.
$('#calendar').fullCalendar('select',
pageData.calendarMonth,
pageData.calendarMonth,
true);
// Create our corner overlay so we can detect whether the
// mouse was over the day when the click event occurred.
var corner = $('<div>').addClass('my-cell-overlay-day-corner');
$('.fc-cell-overlay').append(corner);
}
function onCalendarDayClick(date, allDay, jsEvent, view) {
// Check to see whether the mouse was hovering over our day corner overlay
// that is itself applied to the fullCalendar's selection overlay div.
// If it is, then we know we clicked on the day number and not some other
// part of the cell.
if ($('.my-cell-overlay-day-corner').is(':hover')) {
alert('Click!');
}
}
$('#calendar')
.fullCalendar({
selectable : true,
viewRender : onCalendarViewRender,
dayClick : onCalendarDayClick,
eventSources : [ ... your sources ... ]
});
And the CSS for the overlay, and to make sure the calendar's day number div looks like a link and lines up with our overlay:
#calendar .fc-day-number {
text-decoration: underline;
width: 15px;
height: 16px;
text-align: right;
}
#calendar .fc-day-number:hover {
cursor: pointer;
}
#calendar .my-cell-overlay-day-corner {
position: absolute;
top: 0;
right: 0;
width: 19px;
height: 16px;
cursor: pointer;
}
Fullcalendar 3.0 and up now include this by default through navLinks.
Just use navLinks: true.
Is there any way of making a single row within an AspxGridView flash different colours based on a value within a cell. E.g. continually changing the background colour of the row between red and green if a value in a cell is 5 so that it stands out on the page?
I have found one article that says it cant be done, but this was in 2008..
http://www.devexpress.com/Support/Center/p/Q135996.aspx
With a css class added to row as advised in the previous answer you can apply following script and style:
$(function () {
setInterval(flashRow, 500);
});
function flashRow() {
$("tr.blink").toggleClass("red");
}
Css style:
tr.blink
{
background-color: Green;
}
tr.red
{
background-color: Red;
}
Where blink - css style that you add to the row in the RowDataBound method.
See demo here
Take a look at the E3324 Code Central example.
You can use the described approach as a starting point.
<dx:ASPxTimer ID="ASPxTimer2" runat="server" Interval="250"
ClientSideEvents-Tick="function(s,e)
{
var table = document.getElementById(gridUsers.name);
for (i = 0; i <= table.rows.length; i++)
{
var tableRow = document.getElementById(gridUsers.name + '_DXDataRow' + i);
if (tableRow.getAttribute('flicker') != '1')
return;
if (tableRow.style.backgroundColor == '' || tableRow.style.backgroundColor == 'white')
tableRow.style.backgroundColor = 'red';
else
tableRow.style.backgroundColor = 'white';
}
}">
</dx:ASPxTimer>
you can do that on the event rowdatabount
check the current row is it with the value you want to highlight
then change the color of the current row by adding css attributes to it or assigning a cssclass