I am using a jquery calendar that looks like this:
$(document).ready(function () {
$('#calendar').eCalendar({
weekDays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
months: ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
textArrows: {previous: '<', next: '>'},
eventTitle: 'Evenements',
url: '',
events: [
{ title: 'title', description: 'description', datetime: new Date (2015,07,01)}
]});
});
</script>
To get the events, I connect to a mysql database and store the result in a php variable such as:
$event={ title: 'title', description: 'description', datetime: new Date: (2015,07,01)};
I can't figure out how to put this $event into the jquery script so that it reads it.
I tried for exemple:
$(document).ready(function () {
$('#calendar').eCalendar({
........
........
events: [
<?php echo $event ?>
]});
});
Which doesn't work. Any idea?
Thanks
You have to be sure that $event is a string.
I bet it is an array, please provide a vardump($event);to be sure of that.
If it is an array, try this in place of <?php echo $event; ?>;:
<?php echo serialize($event); ?>;
Perhaps the problem is an error, excess colon after new Date:
$event="{ title: 'title', description: 'description', datetime: new Date: (2015,07,01)};"
Related
I'm using Laravel 8 and Bootsrap in this project. I've tried to solve this problem with Carbon in Laravel, but the prob still likes that.
So I think maybe the problem in JS Script, but I dunno about JS so deep. I really need help with this prob.
My problem is how to change the date format in JS, I wish to change in DD/MM/YYYY format.
JS Script
<script>
$(function() {
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
}
},
{ data: 'updated_at', name: 'updated_at'},
]
});
});
</script>
My Table View
Add this variable to the Model class:
protected $casts = [
'updated_at' => 'datetime:m/d/Y'
];
This will change the datetime format and will reflect whenever you retrieve the data through eloquent.
You could try registering an editor and using moment.js. Something like this:
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
$.fn.dataTable.moment( 'DD/MM/YYYY' );
editor = new $.fn.dataTable.Editor( {
ajax: 'kategori/json',
table: '#kategoris-table',
fields: [ {
label: 'Updated at:',
name: 'updated_at',
type: 'datetime',
def: function () { return new Date(); },
format: 'DD/MM/YYYY',
fieldInfo: 'Formatted date'
}
]
} );
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/kategoris/"+oData.id+"'>"+oData.nama+"</a>");
}
},
{ data: 'updated_at', name: 'updated_at'},
]
});
});
Please see this example which includes the other libraries you would need to load at the end of the example: https://editor.datatables.net/examples/dates/formatting.html
PS - I tried to include the libraries in my answer in case of a broken link but when I do, I am given the message that "There appears to be code in my post that is not formatted properly" and I cannot seem to get it to work with formatting the links.
I'm trying to create a booking system for a hotel. The system will be used by the hotel's administrator, not by the customers.
On the rows i need to see the rooms (100,101,ecc..) and on the columns i need the days.
I'm using the TimelineView, with the initial view set to "resourceTimelineWeek".
I can add the rooms and get it to work, but i don't need to see the hours of days, just the days. The room is reserved at least for one full day.
This is my basic code, i've tried with the option "allDaySlot" without luck.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineWeek',
allDaySlot : true,
resources: [{
id: '1',
title: 'Room 101'
},
{
id: '2',
title: 'Room 102'
}
]
});
calendar.render();
});
Any suggestion?
Thanks
Add slotDuration: { day: 1 }.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineWeek',
allDaySlot: true,
slotDuration: {day: 1},
resources: [{
id: '1',
title: 'Room 101'
},
{
id: '2',
title: 'Room 102'
}
]
});
calendar.render();
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.js"></script>
<div id="calendar"></div>
I have created a scheduler with following events and resources
var sampleEvents = [{ 'id': '1',
'resourceid': '27',
'start': '2018-09-19T07:00:00',
'stop': '2018-09-19T16:00:00',
'title': 'Message 1',
}];
var sampleResources = [{
facility_type: "Message Type",
id: '27',
title: "Message 1"
}];
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: currenDate //Today's Date,
editable: false,
header: {
left: 'today prev,next',
center: 'title',
right: 'month,timelineDay,agendaWeek'
},
defaultView: 'month',
resourceGroupField: 'facility_type',
resourceColumns: [
{
labelText: 'Facility',
field: 'title',
width: 150,
},
],
resources: sampleEvents,
events: sampleResources,
dayClick: function(date, jsEvent, view) {
if(view.name == 'month' || view.name == 'basicWeek') {
$('#calendar').fullCalendar('changeView', 'timelineDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
});
}, function (error) {
});
The events are showing in month view, but they are not shown in day view. Can someone tell me where the problem is?
In JavaScript, variable and property names are case-sensitive. Therefore
'resourceid': '27'`
should be
'resourceId': '27'
as per the example in the documentation. The event isn't showing the timeline view because as far as fullCalendar is concerned you didn't tell it which resource to associate it with.
Assigned objects are improper. If you pass the correct objects. It will work fine
resources: sampleResources,
events: sampleEvents
You can refer below working jsfiddle link
http://jsfiddle.net/jso51pm6/3769/
resources: sampleEvents,
events: sampleResources,
You filled them wrong. Switch them. It will work.
resources: sampleResources,
events: sampleEvents,
I'm trying to echo out value from database with php for selectize.js.
Html code
<select id="type" placeholder="Type" name="type" required>
<!-- This option help to selected value from DB -->
<!--<option value="<?php echo $dataFromDB['type'] ?>" selected></option>-->
</select>
<button id="someType">Add Option</button>
Js code (example from selectizejs (with change))
var $select = $('#type').selectize({
maxItems: 1,
valueField: 'id',
labelField: 'days',
searchField: 'days',
options: [{
id: '1',
days: '5 days'
}, {
id: '2',
days: '2 days'
}, {
id: '3',
days: '1 days'
}],
create: true
});
var control = $select[0].selectize;
$('#someType').on('click', function () {
control.addOption({
id: '4',
days: 'New Days'
});
});
How to automatically add option from database value and set as selected option?
jsfiddle link
Note: I could echo out the value to option if there's a match between database value and options value.
Thanks in advanced.
Like this? http://jsfiddle.net/2zyp8jxn/1/
control.setValue("4");
Create a variable with php:
$php_test = "control.addOption({
id: '".$dataFromDB['type']."',
hari: '".$dataFromDB['type']."'
});
control.setValue('".$dataFromDB['type']."');
";
and add this jquery code
var control = $select[0].selectize;
$(function() {
<?php echo 'var someOptions ='. $php_test ?>
});
I dont know if create a variable someOptions is necessary or not but it works for me.
Thanks
I have a javascript chart built with "highcharts" and I would display data from database in the chart.
I need to display data for each day of the week. I'm using laravel so I can use Carbon, but I don't know how.
Here is my view:
<div id="container"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Actions statistics'
},
xAxis: {
categories: ['01', '02', '03', '04', '05', '06', '07'] // days of the week
},
yAxis: {
title: {
text: 'Actions'
}
},
series: [{
name: 'Submitted actions',
data: [monday rows, tuesday rows, wednesday rows, thursday rows, friday rows, saturday rows, sunday rows]
// data can be retrieved from database where them are stored with "created at" column.
// Something like Actionshistory::where('created_at', first day of the week)?
}
]
});
});
</script>
How can I do this ?
Thanks
Solved
I solved using this in the javascript:
series: [{
name: 'Actions submitted',
data: [<?php echo Actionshistory::whereRaw('WEEKDAY(created_at) = 0')->count() ?>,and so go on]
}
0=Monday, 1=Tuesday,ecc...
Thanks to all.