I am using fullcalendar 4.4.0 and everything working fine except rrule.
If i try with simple recurrence, it is working, but rrule recurrence not working.
let me share my code
<script src="https://unpkg.com/#fullcalendar/rrule#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-daygrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-timegrid#4.4.0/main.min.js"></script>
<scritpt src="https://unpkg.com/#fullcalendar/moment#4.4.0/main.min.js"></scritpt>
<script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
<script src="{{asset('public/plugins/datepicker-master/dist/datepicker.js')}}"></script>
The code for generating event is as follows.
function makeEventFromBook(book) {
var event={};
var start_time_object=new Date(book.start_date+" "+book.book_time);
var end_time_object=new Date(start_time_object.getTime() +
parseInt(book.duration)*60*1000);
var start_time=start_time_object.toISOString();
var end_time=end_time_object.toISOString();
if(book.name==='null' || book.name==null)
book.name='';
event={
id:book.id,
resourceId: book.provider_id,
// start: start_time,
// end:end_time,
title:book.name,
overlap:false,
backgroundColor:`${book.service_item_id==0 ? '#ff0000' : '#1f1dd0'} `,
textColor:'#fff',
borderColor:'transparent',
rrule: {
count: 13,
freq: 'weekly',
interval: 1,
byweekday: [ 'mo', 'fr' ],
dtstart: '2020-03-01',
duration:"01:30"
},
groupId:book.id,
extendedProps:{
user_id:book.user_id,
user_name:book.user_name,
user_email:book.user_email,
user_phone_number:book.user_phone_number,
duration:book.duration,
book_date:book.book_time,
from_admin:book.from_admin,
service_type:book.service_type,
service_item_id:book.service_item_id,
provider_id:book.provider_id,
comment:book.comment,
}
}
return event;
}
What is issue here?
If anyone has experience, please help me.
I am sharing my calendar how it is being showed
There is no recurring event here.
Example of event data:
events=[ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01", duration: "01:30" }, groupId: 117 }, ]
You need to make sure you include the rrule Javascript library file, and the fullCalendar rrule plugin file, and include the plugin in your calendar config.
You also need to remove the "duration" property from your rrule, because that's not a valid rrule option, and will cause an error.
At the time of writing, you can get the rrule file from https://cdn.jsdelivr.net/npm/rrule#2.6.2/dist/es5/rrule.min.js
Here's a working demo: https://codepen.io/ADyson82/pen/poJWLzB
Demo code, for reference:
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["interaction", "dayGrid", "timeGrid", "resourceTimeline", "rrule"],
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
},
events: [ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01" }, groupId: 117 } ]
});
calendar.render();
});
I have faced this issue!I was working with #fullcalendar/ #5.1.0 (ie.,#fullcalendar/core, #fullcalendar/rrule and so on) , the recurring events didn't display. Then I changed all my fullcalendar dependencies (#fullcalendar/) to #5.2.0 and used rrule #2.6.4. It is working fine!
You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996
Related
I recently started working with xslt to generate html from a given xml document. I am trying to display history values using plotly, which is already working well.
Nevertheless, I am currently facing a problem: The x-axis with the date values should be displayed in German. I have already tried to set locale to 'de_DE', but unfortunately this does not work. Does anyone have any idea of how it might work?
var myPlot = node.children[0];
trace1 = {
x: values.map(a => a.xvalue),
y: values.map(a => a.yvalue),
type:'scatter',
name:'Messung',
locale:'de_DE',
hovertemplate: '<b>Wert:</b> %{y}<br><b>Datum:</b> %{x}<br>'
};
data = [ trace1 ];
layout = {
title: 'Verlaufswert: ' + vitSigTitle,
hovermode:'closest',
xaxis: {
autorange: true,
range: [beginDate, endDate],
rangeselector: {
buttons: [
{
count: 1,
label: 'Monat',
step: 'month',
stepmode: 'backward'
},
{
count: 6,
label: '6 Monate',
step: 'month',
stepmode: 'backward'
},
{
count: 1,
label: 'Jahr',
step: 'year',
stepmode: 'backward'
},
{
count: 1,
label: 'Day',
step: 'day',
stepmode: 'backward'
},
{ step: 'all' },
]
},
rangeslider: {range: [beginDate, endDate]},
type: 'date'
},
yaxis: {
title: vitSigUnit,
autorange: false,
range: [minValue-10, maxValue+10],
type: 'linear',
locale:'de_DE'
}
};
Plotly.newPlot(node.children[0], data, layout, {locale: 'de-DE'});
console.log(Plotly.BUILD);
Just setting the locale is not enough, you also have to include the corresponding js file, see https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization
i'm looking for help with updating the x-axis categories on a Highcharts chart with periodically received data.
The chart is defined in a file called forecastgraph.html. It is loaded to index.php, the webpage where I want it displayed, by means of <?php require("widget/forecastgraph.html"); ?>. The chart renders as expected.
Live data which is handled via a js script (called mqtt.js) that receives incoming mqtt data in json format and using jquery updates various parts of index.php in this way: $("#elementid").html(a.b.c);. I load mqtt.js in the head of index.php using <script src="./js/mqtt.js"></script> This again works flawlessly.
What I am struggling with is how to pass incoming data from mqtt.js to the chart to update it as new data comes in. Specifically, I am trying to update the xAxis categories and the corresponding value pairs. Periodically, mqtt.js receives a new weather forecast and so the xAxis categories need to be updated with the new time period that the forecast applies to and the data needs to be updated to reflect the new high and low temperatures for the respective forecast periods.
The code for the chart is posted below. Any help would be appreciated.
Baobab
<script type="text/javascript">
$(function () {
$('#forecastgraph').highcharts({
chart: {
type: 'columnrange',
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
margin: [12, 6, 36, 20]
},
title: {
text: null,
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: [1,2,3,4],
labels: {
y: 30,
style: {
color: 'white',
fontSize: '10px',
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
enabled: false,
x: -14,
},
labels: {
align: 'left'
},
maxPadding: 0.5,
plotLines: [{
value: 10, //normmax
width: 2,
color: '#FF0000'
},{
value: 2, //normmin
width: 2,
color: '#009ACD'
}]
},
tooltip: {
enabled: false
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
style: {
textOutline: 'none'
},
crop: false,
overflow: 'none',
formatter: function () {
var color = this.y === this.point.high ? '#33C4FF' : 'red';
return '<span style="font-size: 12px; font-family:helvetica; font-weight:normal; text-shadow: none; color:' + color + '">' + this.y + '°</span>';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[20, -3],
[5, -2],
[6, -2],
[8, -15]
],
color: '#b9deea',
borderColor: '#92cbde',
borderRadius: 4
}]
});
});
</script>
EDIT: Additional Information.
The incoming json data looks like this:
[{
"period": "Monday",
"condition": "Cloudy",
"high_temperature": "7",
"low_temperature": "-2"
"icon_code": "10",
"precip_probability": "20"
}, {
"period": "Tuesday",
"condition": "A mix of sun and cloud",
"high_temperature": "6",
"low_temperature": "-2"
"icon_code": "02",
"precip_probability": "20"
}, {
"period": "Wednesday",
"condition": "A mix of sun and cloud",
"high_temperature": "3",
"low_temperature": "-5"
"icon_code": "02",
"precip_probability": "20"
}, {
"period": "Thursday",
"condition": "A mix of sun and cloud",
"high_temperature": "1",
"low_temperature": "-10"
"icon_code": "02",
"precip_probability": "20"
}]
The function responsible for the incoming json formatted data in the mqtt.js script loaded to index.php handles the incoming data in this way (mqtt.js is started when index.php is loaded):
function onMessageArrived(message) {
console.log("onMessageArrived: " + message.payloadString);
//Env Canada forecast
if (message.destinationName == "myHome/ec/json_data_ec") {
var data = JSON.parse(message.payloadString);
$("#forecast_period_1").html(data[0].period); // update div forecast_period_1 in index.php for debugging purposes and show that data is coming in
forecast_period_1 = (data[0].period); // assign to global var
forecast_period_1_high = (data[0].high_temperature); // global var
forecast_period_1_low = (data[0].low_temperature); // global var
Updating various html elements throughout index.php with the incoming data works great and is stable. What I have attempted to do, but with no success, is to update the chart using the data placed in the global variables (declared as global at he beginning of the script) by the mqtt.js script. In the example above, forecast_period_1 needs to be used as the first of the four xAxis categories and forecast_period_1_high and forecast_period_1_low, to update the respective hi and lo values in the chart's data.
Is this an output that you want to achieve? In the below demo, I wrote a function that takes a high and low temperatures value and next is triggered on the button. The new data is attached to the chart via using the series.update feature.
Demo: https://jsfiddle.net/BlackLabel/he768cz3/
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I have found a solution for it. First, you have to store the chart in a variable then after you are able to update chart data. Like below
var chart = $('#forecastgraph').highcharts({ ...option })
Update xAxis or series data
// Update xAxis data label
chart.update({
xAxis: {
categories: [1,2,3,4]
}
});
// Update series data
chart.series[0].update({
data: [
[20, -3],
[5, -2],
[6, -2],
[8, -15]
]
});
I am upgrading fullcalendar-scheduler 1.9.4 to v5 beta2.
I found that the behaviour of slotLabelInterval has been changed from v3 to v4.
My objective : I want to totally remove the slot label row. My setting in V1.9.4 is like below (It works) :
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'timeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
But the setting "slotLabelInterval: '24:00:00'" don't do the same thing in resourceTimeline type with Fullcalendar-Scheduler 5 beta2 (same as v4)
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'resourceTimeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
The screenshot for the above code :
What I have tried :
set slotDuration to 24 at the same time than slotLabelInterval (It didn't works)
set slotLabelFormat: { weekday: 'short', month: 'short' } (It didn't works, it always display slot time label )
Question: How to make the same effet like the first screenshot with V5
In v4 (or the v5 beta) you can set the same time period like this:
slotLabelInterval: { days: 1 },
Demo: https://codepen.io/ADyson82/pen/abvqBrN
I'm playing with a basic implementation of FullCalendar. But with the code below (copy and paste into a file). My 'meeting' repeats at the given time every single day.
I should have 1 event against Fred, 3pm to 6pm on March 1st. Not repeating.
This happens regardless of startRecur/endRecur properties.
The only thing that had effect was daysOfWeek property. Setting a value meant it only appears on those days.
What am I doing wrong?
Thanks Mick
function run() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['resourceTimeline'],
defaultView: 'resourceTimelineWeek',
resources: [{
id: 1,
title: 'Fred'
},
{
id: 2,
title: 'Jane'
}
],
events: [{
id: '1',
resourceId: '1',
title: 'Meeting',
allDay: false,
start: '2020-03-1',
end: '2020-03-1',
startTime: '15:00',
endTime: '18:00'
}]
});
calendar.render();
}
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.min.css">
<body onload="run()">
<div id='calendar'></div>
</body>
If you specify the startTime and endTime properties mentioned in the Recurring events documentation, then fullCalendar ignores the standard start and end properties completely for determining the placement of the event, and relies instead on the recurrence-related properties (startTime, endTime, startRecur and endRecur).
You could specify this single event using the recurrence syntax, like this:
startRecur: '2020-03-01',
endRecur: '2020-03-02',
startTime: '15:00',
endTime: '18:00'
But it's a bit nonsensical if you don't actually want any recurrence.
If you just want a normal single-occurence event, then don't use the "recurring events" properties. Just specify the date and time in the start and end properties in the normal way which is clearly documented and shown in countless examples in the fullCalendar documentation and demos:
start: '2020-03-01 15:00',
end: '2020-03-01 18:00',
I'm not clear how you ended up deciding to use properties which are only mentioned on the documentation page about recurrence, in order to try and define a non-recurring event.
Anyway here's a working demo:
function run() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['resourceTimeline'],
defaultView: 'resourceTimelineWeek',
resources: [{
id: 1,
title: 'Fred'
},
{
id: 2,
title: 'Jane'
}
],
events: [{
id: '1',
resourceId: '1',
title: 'Meeting',
allDay: false,
start: '2020-03-01 15:00',
end: '2020-03-01 18:00',
}]
});
calendar.render();
}
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.min.css">
<body onload="run()">
<div id='calendar'></div>
</body>
You can use below code to show one day, daily, weekly, every two weeks and monthly events with tooltip on mouse hover event.
Visit here- https://stackoverflow.com/a/68770685/9673996
I am trying to get multiple types of Google Charts on one page. Pie graph and Calender chart. When I try to do this, I get the following error in place of the Pie Chart:
You called the draw() method with the wrong type of data rather than a DataTable or DataView
The error goes away if I only do one chart at a time. And it is always the cart on the top that shows the same error. The best I can tell its because teh data is of a different type.. So I figured it had something to do with interfering variables. I added a uniqe identifier to each chart's data and I still get the issue...
Here is the HTML output of my PHP:
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {
packages : [ 'corechart' ]
});
google.setOnLoadCallback(drawChart_testGraph);
function drawChart_testGraph() {
var data_testGraph = google.visualization.arrayToDataTable([
[ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ],
[ 'Customer Apps', 1 ], [ 'PC Support', 0 ],
[ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ],
[ 'Executive', 4 ], [ 'Customer Service', 0 ],
[ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ],
[ 'Materials Management', 0 ], [ 'Remittance', 0 ],
[ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ],
[ 'Provisioning Support', 1 ], ]);
var options_testGraph = {
title : 'Usage by department',
backgroundColor : 'transparent',
is3D : 'false',
};
var chart_testGraph = new google.visualization.PieChart(document
.getElementById('testGraph'));
chart_testGraph.draw(data_testGraph, options_testGraph);
console.log(data_testGraph);
}
</script>
<div id='testGraph' style='width: 900px; height: 500px;'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1.1', {
packages : [ 'calendar' ]
});
google.setOnLoadCallback(drawChart_testGraph2);
function drawChart_testGraph2() {
var dataTable_testGraph2 = new google.visualization.DataTable();
dataTable_testGraph2.addColumn({
type : 'date',
id : 'Department'
});
dataTable_testGraph2.addColumn({
type : 'number',
id : 'Count'
});
dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ],
[ new Date('2014, 09, 17'), 1 ],
[ new Date('2014, 09, 15'), 6 ],
[ new Date('2014, 09, 13'), 1 ],
[ new Date('2014, 09, 12'), 2 ], ]);
var options_testGraph2 = {
title : 'Usage by department',
backgroundColor : 'white',
is3D : 'false',
};
var chart_testGraph2 = new google.visualization.Calendar(document
.getElementById('testGraph2'));
chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2);
}
</script>
<div id='testGraph2' style='width: 900px; height: 500px;'></div>
</div>
Any ideas?
That is not the right way to load google packages, you are trying to load google visualization packages 2 times, so the second one is overwriting the first one. You need to remove the second load and just load both in your first script: (or load both the 2 times)
google.load('visualization', '1', {
packages : [ 'corechart', 'calendar' ]
});
You can back the old version. Just change the version number of js file on link.
version':'1.1 to version':'1
Like: <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>