Hi i use Fullcalendar and i want to change start time and end time i wrote this but didn't work. i see start time is 00 and end time is 23 i dont want to this.
how can i solved this problem.
<script>
import FullCalendar from '#fullcalendar/vue'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
import trLocale from "#fullcalendar/core/locales/tr";
export default {
components: {
FullCalendar
},
data: function() {
return {
calendarOptions: {
locale:trLocale,
firstDay:1,
businessHours: [ // specify an array instead
{
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday, Tuesday, Wednesday,Thursday,Friday
startTime: '08:45', // 8am
endTime: '18:00' // 6pm
},
{
daysOfWeek: [ 6 ], // Satuday
startTime: '08:45',
endTime: '12:30'
}
],
Related
I am trying to use chartjs-plugin-zoom to implement zooming on a chart using vue-chartjs. With the code below, I get a this.$refs.myChart.resetZoom is not a function error. How do I correctly get a reference to the chart so that I can call the resetZoom function?
<template>
<div>
<button #click="resetGraph">Reset</button>
<Bar
id="myChart"
ref="myChart"
:options="chartOptions"
:data="chartData"
/>
</div>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom';
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin)
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true,
indexAxis: 'y',
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'xy',
}
}
}
}
}
},
methods: {
resetGraph() {
this.$refs.myChart.resetZoom()
}
}
}
</script>
Changing this.$refs.myChart.resetZoom() to this.$refs.myChart.chart.resetZoom() fixed the issue for me.
I'd like to rename "Qty" into "Quantity"
Follow things I already tried:
In 'spartacus-configuration.module.ts'
i18n: {
resources: {
en: {
product: {
addToCart: {
quantity: 'Quantity'
}
}
}
}
}
in src/assets/i18n-assets/en/produkt
{
...
"addToCart": {
...
"quantity": "Quantity",
...
},
...
}
The easiest way to overwrite translation values is to provide a new resource in app.module.ts config.
Firstly, new object with specific translations should be defined:
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
and then it should be provided after default Spartacus translations:
...
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
Example code can look like this:
import { translations } from '#spartacus/assets';
import { provideConfig } from '#spartacus/core';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { EffectsModule } from '#ngrx/effects';
import { StoreModule } from '#ngrx/store';
import { I18nModule } from '#spartacus/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpartacusModule } from './spartacus/spartacus.module';
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
SpartacusModule,
I18nModule,
],
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}
For more information please look into Spartacus documentation: https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations
I am trying to use the vue-echarts wrapper for the echarts library
I get an error ("Error: xAxis "0" not found"), while trying to implement a simple example found here:
Any assistance is much appreciated.
Here is my code:
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
use([
CanvasRenderer,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent
]);
export default {
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "light"
},
data() {
return {
option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
};
}
};
</script>
I'm not sure, but it may be this line:
myChart.setOption(option);
I wish to add event when I select time.
This works fine on fullcalendar without resource.
However, it does not create any event when I change defaultview to "resourceTimeGridDay". I added resourceID already. It makes EVENTS array when I check with console.log but now shown on calendar
any help?
I am using Vue js.
<template>
<FullCalendar
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
ref="fullCalendar"
defaultView="resourceTimeGridDay"
:plugins="calendarPlugins"
:config="config"
:events="EVENTS"
:resources="resources"
:selectable="true"
:editable="true"
#select="handleSelect"
/>
</template>
<script>
import FullCalendar from "#fullcalendar/vue";
import { Calendar } from "#fullcalendar/core";
import resourceTimelinePlugin from "#fullcalendar/resource-timeline";
import resourceTimeGridPlugin from "#fullcalendar/resource-timegrid";
import InteractionPlugin from "#fullcalendar/interaction";
import { mapGetters } from "vuex";
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarPlugins: [resourceTimeGridPlugin, InteractionPlugin],
},
resources: [
{ id: "a", title: "Auditorium A" },
{ id: "b", title: "Auditorium B" },
{ id: "c", title: "Auditorium C" }
],
calendarApi: null,
};
},
methods: {
handleSelect(arg) {
var resourceid = arg.resource.id;
this.$store.commit("events/ADD_EVENT", {
title: "test",
start: arg.start,
end: arg.end,
resourceID: resourceid
});
},
},
mounted() {
this.calendarApi = this.$refs.fullCalendar.getApi();
},
computed: {
...mapGetters("events", ["EVENTS"]),
},
};
</script>
<style lang="scss">
#import "~#fullcalendar/core/main.css";
#import "~#fullcalendar/daygrid/main.css";
#import "~#fullcalendar/timeline/main.css";
#import "~#fullcalendar/resource-timeline/main.css";
#import "~#fullcalendar/timegrid/main.css";
</style>
My chart Will not render I tried using query selector and refs. It is not throwing any errors just not rendering to the DOM.
The Template
The Function
createChart() {
let article = this.$el.querySelector(".highchart");
//let article = this.$refs.highchart;
HighCharts.chart(article, {
series: [
{
type: "treemap",
layoutAlgorithm: "squarified",
data: this.chartData
}
],
colorAxis: {
minColor: "#F98C32",
maxColor: "#F04E23"
},
title: {
text: `Total Items ${this.totalCount}`
}
});
}
Called in Mounted
mounted() {
this.createChart();
}
Have you considered using highcharts-vue official wrapper which is recommended? It can be downloaded here: https://github.com/highcharts/highcharts-vue. Check the code and demo posted below.
main.js:
import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
/* eslint-disable no-new */
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
App.vue:
<template>
<div id="app"><highcharts /> <btn /></div>
</template>
<script>
import Chart from "./components/Chart";
import Button from "./components/Button";
export default {
name: "App",
components: {
highcharts: Chart,
btn: Button
}
};
</script>
Chart.vue:
<template>
<div>
<highcharts
:options="chartOptions"
ref="lineCharts"
:constructor-type="stockChart"
></highcharts>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import stockInit from "highcharts/modules/stock";
import { EventBus } from "./../event-bus.js";
stockInit(Highcharts);
exportingInit(Highcharts);
export default {
props: {
partsdata: {
type: Array
}
},
components: {
highcharts: Chart
},
created() {
EventBus.$on("btn-clicked", data => {
this.chartOptions.series[0].data = data.newData;
});
},
data() {
return {
chartOptions: {
chart: {
type: "spline",
title: "Hassaan"
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
tooltip: {
crosshairs: true,
shared: true
},
credits: {
enabled: false
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1
}
}
},
series: [
{
data: [1, 2, 3]
}
]
}
};
}
};
</script>
Demo:
https://codesandbox.io/s/nw750l07nj