i created a new MVC asp.Net webpage and for testing i added Fullcalendar 5.1.
For testing i put all the stuff in index.html:
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="~/lib/fullcalendar/main.css" />
<script src="~/lib/fullcalendar/main.js"></script>
<meta charset='utf-8' />
<style>
.fc-sun {
background-color: blue;
}
.fc-sat {
background-color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-07-01'
},
{
title: 'Long Event',
start: '2020-07-07',
end: '2020-07-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-16T16:00:00'
},
{
title: 'Conference',
start: '2020-07-11',
end: '2020-07-13'
},
{
title: 'Meeting',
start: '2020-07-12T10:30:00',
end: '2020-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-07-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-07-28'
}
]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
But the backcolor wont change :-(
if i put some other variables in like this:
.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
padding-top: 10px; /* an override! */
padding-bottom: 21px; /* an override! */
}
the header padding changes.
What iam doing wrong?
the fiddle is the example: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/
Can you please help me?
EDIT:
As a workaround i use this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '00:00', // a start time (09am in this example)
end: '00:00', // an end time (6pm in this example)
},
and the style is:
<style>
.fc .fc-non-business {
color: red;
background: green;
opacity: 0.1;
}
</style>
But why i cant set the other properties?
In version 5.1 the classes are .fc-day-sat and fc-day-sun
Setting the background-color for those classes works fine.
Related
I have a Kendo UI scheduler widget with a custom event template. In the template I add a css class to the event template if a certain condition is met. What I want to do is to change the border of the event. I have already tried by using the css selector .k-event:has(div.custom-event.high) but with no success. In the below fiddle there is an example of what I'm trying to achieve. The task are colored using the lightgray color, the tasks on which I need to change the border color are highlighted in yellow. As you can see I can correctly select div.k-event and div.custom-event.high but not .k-event:has(div.custom-event.high). Can someone help me?
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
eventTemplate: $('#template').html(),
height: 600,
views: [{
type: "week",
selected: true
}],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: {
from: "MeetingID",
type: "number"
},
title: {
from: "Title",
defaultValue: "No title",
validation: {
required: true
}
},
start: {
type: "date",
from: "Start"
},
end: {
type: "date",
from: "End"
},
startTimezone: {
from: "StartTimezone"
},
endTimezone: {
from: "EndTimezone"
},
description: {
from: "Description"
},
recurrenceId: {
from: "RecurrenceID"
},
recurrenceRule: {
from: "RecurrenceRule"
},
recurrenceException: {
from: "RecurrenceException"
},
roomId: {
from: "RoomID",
nullable: true
},
attendees: {
from: "Attendees",
nullable: true
},
isAllDay: {
type: "boolean",
from: "IsAllDay"
}
}
}
}
},
group: {
resources: ["Attendees"],
orientation: "horizontal"
},
resources: [{
field: "attendees",
name: "Attendees",
dataSource: [{
text: "Alex",
value: 1,
color: "#f8a398"
}, {
text: "Bob",
value: 2,
color: "#51a0ed"
}, {
text: "Charlie",
value: 3,
color: "#56ca85"
}],
multiple: true,
title: "Attendees"
}]
});
});
div.k-event {
background-color: lightgray !important;
}
.k-event:has(div.custom-event.high) {
background-color: red !important;
}
div.custom-event.high {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="template" type="text/x-kendo-template">
<div class="custom-event #if(title.indexOf('Eval') > -1) {# high #}#">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<h3>#: title #</h3>
</div>
</script>
</body>
</html>
In general, the eventTemplate controls only the content of the event element. If you would like to change the background of the whole event, then you will need to:
expand the width and height of the inner element custom-event
set the custom class directly to the .k-event element in the dataBound event of the widget
For the former approach check the following how-to demo:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color
For the latter implementation check this one:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound
I am trying to understand full calendar.. i don't know how to use methods like selection or colour. Could any one please give me a example for colour my each event day by different colour .and on clicking over the day tile a message should ask us to add a event.
I had read http://fullcalendar.io/docs/ but can't understand .how to change that.
<link href="~/Content/calendar/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<style>
body {
margin: 40px 10px;
padding: 15px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<div id='calendar'></div>
#section scripts{
<script src="~/Scripts/calendar/moment.min.js"></script>
<script src="~/Scripts/calendar/jquery.min.js"></script>
<script src="~/Scripts/calendar/fullcalendar.min.js"></script>
<script src="~/Scripts/calendar/jquery-ui.custom.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar(Duration,'00:30:00');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
slotDuration:'00:00:15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
});
</script>
}
The following code is used to give colors to different events in fullcalender.
{
title: 'All Day Event',
start: '2015-02-01',
backgroundColor: '#000'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10',
backgroundColor: '#DDD'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00',
backgroundColor: '#CCC'
},
give a backgroundColor parameter with color code to particular event.
and following code is used, if you want to open a popup for a new event when you click on the event title.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: '<?php echo $view; ?>',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$.ajax({
url:"<?php echo site_url("controller/function_name");?>/"+convert_date(start),
cache:false,
data:"event_name="+convert_date(start),
success:function(data){
//alert(data);
if(data=="holiday" || data=="no"){
$( ".modalbox" ).on( "click", function() {
});
//$("#day_"+convert_date(start)).css("background-color","#f00");
$("#event_date").val(start);
summary();
summary_change($("#reminder").val());
//$("#date_of_end").val(convert_date_mdy(start));
//$("#summary_date").val(convert_date_mdy(start));
}
else{
$( ".modalbox" ).on( "click", function() {
});
$( ".modalbox" ).trigger( "click" );
$("#event_date").val(start);
summary();
summary_change($("#reminder").val());
//$("#date_of_end").val(convert_date_mdy(start));
//$("#summary_date").val(convert_date_mdy(start));
}
}
});
$("#addSchedule").submit(function(){
title=$("#shift").val();
if (title!="") {
date=convert($("#event_date").val());
end_date=convert(end);
$("#event_date").val(date);
$("#end_date").val(end_date);
$("#allDay").val(allDay);
calendar.fullCalendar('renderEvent',
{
title: title,
start:$("#event_date").val(),
end: end,
allDay: allDay
},
);
}
$("#holder").hide();
//return false;
});
calendar.fullCalendar('unselect');
},
editable: true,
events: <?php echo $result;?>,
eventClick: function(event) {
$.ajax({
url:"<?php echo site_url("controller/function_name");?>/"+event.event_id,
cache:false,
data:"event_name="+event.title,
success:function(data){
$("#inline1").html(data);
$( ".modalbox1" ).on( "click", function() {
});
$( ".modalbox1" ).trigger( "click" );
}
});
},
});
eventClick parameter will be in act, when you click on particular event on fullcalender.
I created a calendar using fullcalender all the events (tasks) are displaying on it.
Now i want to open a form which display the event's details, how can i taking the event details by clicking on it?
my code:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
Check the full calendar documentation. Here is the link.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
],
eventClick: function(event) {
if (event.title) {
alert(event.title);
}
}
});
I have a problem with calendar,I want to paint special days different color For example
On calendar
03.06.2011 Day--->blue
04.06.2011 day---->red
12.06.2011-04.07.2011 Days ----> yellow
More than one color I want to use selected day
You can use javascript to do that,
Refer to JSFiddle Here
You can add custom special day,
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-07-04',
editable: true,
events: [{
title: 'All Day Event',
start: '2014-07-01'
}, {
title: 'Long Event',
start: '2014-07-07',
end: '2014-07-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-16T16:00:00'
}, {
title: 'Meeting',
start: '2014-07-12T10:30:00',
end: '2014-07-12T12:30:00'
}, {
title: 'Lunch',
start: '2014-07-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2014-07-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-07-28'
}],
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');
};
}
}
}
});
});
For changing the colour, you can edit background on .holiday in css file
body {
margin: 0;
padding: 50px 0 0 0;
font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 100%;
}
.holiday {
background: lightgray;
}
Hope it can help you
Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is: