hello i used fullcalendar and html collective to display a full calendar on laravel 5.4 it worked when i return the response()->json($data) but when i tried to display my calender on the my welcome view i had empty page :/ .
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2017-05-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
{!! Html::style('vendor/maryem/fullcalendar/fullcalendar.min.css') !!}
{!! Html::style('vendor/maryem/fullcalendar/fullcalendar.print.min.css') !!}
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
{!! Html::script('vendor/maryem/fullcalendar/fullcalendar.min.js') !!}
{!!
{!! Html::script('vendor/maryem/fullcalendar/lib/moment.min.js') !!}Html::script('vendor/maryem/fullcalendar/lib/jquery.min.js') !!}
I Think there is an error in your library calling lines please call them by using following sequence
{!!Html::script('vendor/maryem/fullcalendar/lib/jquery.min.js') !!}
{!! Html::script('vendor/maryem/fullcalendar/lib/moment.min.js')!!}
{!! Html::script('vendor/maryem/fullcalendar/fullcalendar.min.js') !!}
Related
I am trying to get all the selected nodes from KendoTreeView and display a Treeview with only selected values from the previous Tree.
Is this possible to achieve?
Thanks in advance.
Sure it is possible and below there is a rough way to do it, taken from this demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
<hr>
<div id="treeview2"></div>
</div>
</div>
<script>
$("#treeview2").kendoTreeView();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i]);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
let treeView2 = $("#treeview2").data("kendoTreeView");
treeView2.dataSource.data(checkedNodes);
}
</script>
<style>
#treeview .k-sprite,
#treeview2 .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
</style>
</div>
</body>
</html>
Demo in Dojo
The point is, you have to retrieve the selected nodes(as made with checkedNodeIds()) and then set them to the target treeview dataSource:
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
I have a Kendo UI grid which may have many columns and so I have enabled horizontal scrolling to allow all the columns to be shown.
I need to be able to re-order the columns and am using the Drag and Drop functionality to do so.
This works fine the first time as the selected column can be dragged to end and the grid auto scrolls but once dropped the auto scrolling no longer works for any other column I drag.
I have searched the Kendo documentation & forum and have not found an answer to this problem.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/column-reordering">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.fiori.mobile.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" style='width:400px;'>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: {type: "date" }
}
}
},
pageSize: 15
},
height: 550,
reorderable: true,
scrollable:true,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country",
width: 120
},
{
field: "ShipCity",
title: "Ship City",
width: 120
},
{
field: "ShipName",
title: "Ship Name",
width: 120
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
});
</script>
</div>
</body>
</html>
Does any body have any ideas how to fix this?
Thanks
To clarify you meant horizontal scrolling no longer works? When I used Kendo's demo the vertical scrolling seemed to working after the drag and drop reordering. It sounds like you may have found a bug and you should submit to a support ticket to Telerik to see if they have a fix for it.
If you could post your code that would be helpful as well. It appears you just posted the Kendo Demo code which does not really help me fix what is wrong with your code.
I am trying to generate a bar graph using data from MYSQL through ajax by taking two input date fields from the user and returning the results using ajax.The problem is that when i select the date range, it doesn't show me anything.
I am new to Ajax as well, so any help will be appreciated.
Below is the code i have tried so far;
Thanks
<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $cakeDescription ?></title>
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(startdate,enddate) {
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<input type="date" id="startdate" name="startddate">
<input type="date" id="enddate" name="enddate">
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Below is my data.phpfile,
<?php
#Basic Line
require '../../conn/connection.php';
$id = $_GET['id'];
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query("SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses WHERE timerecorded>=" . $startdate . " AND timerecorded<=" . $enddate . " GROUP BY membername");
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
i have this HTML code, I cannot make it sorted on sale column, please help how to do that, I've tried to implement this solution How to sort numeric with string values in Kendo-Grid , but still failed.
<html>
<head>
<link href="lib/kendo/styles/examples-offline.css" rel="stylesheet">
<link href="lib/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="lib/kendo/styles/kendo.default.min.css" rel="stylesheet">
<script src="lib/js/jquery-ui-1.8.2.custom.min.js"></script>
<script src="lib/kendo/js/jquery.min.js"></script>
<script src="lib/kendo/js/kendo.web.min.js"></script>
<script src="lib/kendo/js/console.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section">
<table id="grid">
<thead>
<tr>
<th data-field="product">Product</th>
<th data-field="sale">Sale</th>
</tr>
</thead>
<tbody>
<tr style=display:none><td>A</td><td>6,698</td></tr>
<tr style=display:none><td>B</td><td>10,900</td></tr>
<tr style=display:none><td>C</td><td>2,300</td></tr>
<tr style=display:none><td>D</td><td>700</td></tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
pageSize: 200
},
height: 350,
sortable: true,
filterable: true,
groupable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "product",
width: 200
} , {
field: "sale",
sortable: {
compare: function(a, b) {
var x = a.sale.replace(/\,/g,'');
var y = b.sale.replace(/\,/g,'');
return x - y;
}
},
filterable: false,
width: 100
}
]
});
});
</script>
<style scoped="scoped">
.demo-section {
width: 800px;
}
.demo-section h3 {
margin: 5px 0 15px 0;
text-align: center;
}
</style>
</div>
</div>
</body>
</html>
The problem is that you never say that sale is actually a number so despite you remove , they are still getting strings.
You have to do:
Option 1: use kendo.parseInt to parse sale into numbers (depending on your culture it will take care of , as thousand separator).
sortable: {
compare: function(a, b) {
var x = kendo.parseInt(a.sale);
var y = kendo.parseInt(b.sale);
console.log(a.sale,x);
console.log(b.sale,y);
return x - y;
}
},
Option 2: Declare that the column is a number and say to display it with thousand separator. Then you DataSource would be:
dataSource: {
pageSize: 200,
schema: {
model: {
fields : {
sale : { type : "number" }
}
}
}
},
and you columns definition:
columns: [
{ field: "product", width: 200 } ,
{ field: "sale", filterable: false, width: 100, format : "{0:##,#}" }
]
NOTE: For this second alternative you don't need to define compare function. So your code would be:
$("#grid").kendoGrid({
dataSource: {
pageSize: 200,
schema : {
model: {
fields: {
sale: { type: "number" }
}
}
}
},
height : 350,
sortable : true,
filterable: true,
groupable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "product", width: 200 } ,
{ field: "sale", filterable: false, width: 100, format: "{0:##,#}" }
]
});
I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>
How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");
Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.