I am using fullcalendar with angularjs to display events. Currently the month view is working correctly. But day button and week button aren't displayed in the UI.In both Left and right side Only Today, back and next buttons are displayed.I can't figure out the reason for that. Please find the below code.
view.html
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
You can add the following code lines in your script to display the day view and week view.
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay'
}
Reason for changing the right property fields is agendaWeek,agendaDay words aren't supported in the latest release of FullCalendar
Related
I use fullcalendar with angularjs and when I pass events as follows it doesn't display in the calendar correctly
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.calendarEl = "";
$scope.calendar = "";
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 21:00',
end: '2019-05-06 00:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
$scope.calendarEl = document.getElementById('calendar');
$scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ]
});
$scope.calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
So when the calendar is displaying both events the event title with test1 doesn't highlight both days 5 and 6th. It only highlights day 5. But if I add the starting time as 00:30 then it highlight both days correctly. How can I overcome this issue ?
I use fullcalendar in angularjs as follows to display some event values in the calendar
It displays the values correctly.
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-
4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-
4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 08:00',
end: '2019-05-10 08:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay'
}
});
calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
Although I have declared a title in the above it always appends the time with a or p accordingly on the specific date. How can I only display the title in the calendar ?
if there is a time specified, it will be displayed as a (for AM) or p (for PM); for all-day events, you can skip entering a time at all... you can check the following code below:
UPDATE: You can use CSS to remove the time also - this way there will be no difference between all-day events and events with a fixed start and/or end times.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.event = {
events: [{
title: 'test1',
start: '2019-05-05',
end: '2019-05-10'
},
{
title: 'test2',
start: '2019-05-05'
},
{
title: 'test3',
start: '2019-05-13 15:00',
end: '2019-05-15 11:30'
},
{
title: 'test4',
start: '2019-05-26 10:00',
end: '2019-05-28 13:30'
}
]
};
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: $scope.event.events,
plugins: ['dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridDay'
}
});
calendar.render();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
.fc-day-grid-event .fc-time {
display: none;
}
<link href='https://fullcalendar.io/assets/demo-to-codepen.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/core/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.css' rel='stylesheet' />
<script src='https://fullcalendar.io/assets/demo-to-codepen.js'></script>
<script src='https://fullcalendar.io/releases/core/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/interaction/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.js'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
If we want to prevent appending the time to the title we need to define the start and end time without declaring the time as below.
$scope.event = {events: [{
title:'test1',
start: '2019-05-05',
end: '2019-05-10'
},
{
title:'test2',
start: '2019-05-05'
}]};
Please note that I haven't uploaded the whole code but have updated the changed code only. Rest of the code remains the same.
This is my first time trying to use a Kendo control, and my BA is requiring it for my current project (I have been using Angular-ui-grid). I can't get the Kendo grid to show at all with test data and I am clueless as to what I am missing. The Console in Chrome says "Kendo requires JQuery to be loaded before Angular. However, the JQuery bundle is set to load first. I even put jquery-1.8.2.js before the angular.js script tag, but it still says the same thing I have the following script tags in my _Layout.cshtml page:
#Styles.Render("~/CSS/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="~/Scripts/dirPagination.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-touch.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/draggable-rows.js"></script>
<script src="~/Scripts/app/Home/OperatorHomeCtrl.js"></script>
<script src="~/Scripts/app/Home/operatorHomeService.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/angular-kendo.js"></script>
Here is my module:
var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'kendo.directives','ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.draggable-rows'])
Here is my Controller:
angular.module('myModule').controller("TestCtrl", function ($compile, $scope, $log) {
$scope.gridOptions = {
pageable: false,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
dataSource: new kendo.data.DataSource({
data: [
{ id: 1, name: "x" },
{ id: 2, name: "y" }
],
schema: {
model: {
id: "id",
fields: {
'Name': { type: "string", editable: true },
}
}
}
}),
columns: [
{ field: "name" },
{ template: '<button class=\'k-button\' ng-click=\'test("custom1")\'><i class="icon-edit"></i>custom1</button>' },
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
{ template: '<button class=\'k-button\' ng-click=\'test("custom2")\'><i class="icon-edit"></i>custom2</button>' }
]
}
]
};
$scope.test = function (m) {
alert(m)
};
});
Here is my HTML:
<script src="~/Scripts/app/Test/TestCtrl.js"></script>
<div ng-app="myModule" ng-controller="TestCtrl">
<kendo-grid k-options="gridOptions">
</kendo-grid>
</div>
Can someone please tell me what I am missing here?
Any assistance is greatly appreciated!
Got the grid to show up, although the headers don't line up correctly with the body. It did not like the Script tag written as:
<script src="~/Scripts/angular-kendo.js"></script>
I had to change it to:
<script src="#Url.Content("~/Scripts/angular-kendo.js")"></script>
Something's causing the header cells to not line-up correctly, but at least the grid is showing. Thanks all for trying to help!
I am not able to get the kendo-grid on my html screen. It does not shows any error but does not shows the outut as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="KendoDemos">
<h1>Customer list</h1>
<div ng-controller="CustomerController">
<!--<kendo-grid options="mainGridOptions">
</kendo-grid>-->
<div ng-controller="CustomerController" id="myKendoDemos" kendo-grid k-data-source="gridData" k-columns="gridColumns"></div>
</div>
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<!--<script src="Scripts/kendo/2014.2.716/kendo.grid.min.js"></script>
<script src="Scripts/kendo/2014.2.716/kendo.core.min.js"></script>-->
<script>
var app = angular.module("KendoDemos", ["ngRoute"]);
app.controller("CustomerController", function ($scope) {
$scope.gridData = [
{ customerId: 1, customerName: 'shikhar1' },
{ customerId: 2, customerName: 'shikhar2' },
{ customerId: 3, customerName: 'shikhar3' },
{ customerId: 4, customerName: 'shikhar4' }
//{
//dataSource: "http://localhost:58816/api/Values"
// }
];
$scope.gridColumns = [{
field: "customerId",
title: "customerId",
width: "120px"
}, {
field: "customerName",
title: "customerName",
width: "120px"
}];
});
</script>
</body>
</html>
First of all since you are using kendo-grid, k-data-source and k-columns which are directives, you need to add kendo.directives as an app dependency
var app = angular.module("KendoDemos", ["ngRoute", "kendo.directives"]);
Here's a Working Plunk of a Kendo Grid using your options. Hope this helps
I'm going to turn a REST dataset into an ng-grid component. I'm using the basic demo which ships with ng-grid component but using an $http.get to populate the grid:
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script language="javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('Hello', function($scope, $http) {
$http.get('http://server/json').
success(function(data) {
$scope.myData = data;
});
});
$scope.gridOptions = {
data: 'myData',
enableRowSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{ field: 'name', displayName: 'name', enableCellEdit: false } ,
{ field: 'surname', displayName: 'surname', enableCellEdit: false }
]
};
});
</script>
</head>
<body ng-controller="Hello">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
I've tried the above code, however the REST service is not invoked and the grid is displayed as a blank div. I've tried with several variations of the $http.get method with no luck.
Any help ?
Thanks!
Your gridOptions seem to be set outside the controller. Move it inside and it should work.
You need to change
http://server/json
to the endpoint you're calling to actually get the data. ://server/json is just a placeholder for your actual endpoint. The div is empty because there's no data there.