I have a problem with FullCalendar in Laravel Nova Tool.
I've created the Tool and I can display the events in generated calendar. The problem is with the localisation and the height of the calendar. Here some code:
<template >
<div>
<FullCalendar
#dateClick="handleDateClick"
#eventClick="handleEventClick"
#eventMouseEnter="handleMouseEnter"
#eventMouseLeave="handleMouseLeave"
ref="fullCalendar"
:plugins="calendarPlugins"
:weekends="calendarWeekends"
:events="calendarEvents"
:config="{
locale: 'it', <============
height: '200'<========
}"
:header="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listWeek'
}"
/>
</div>
</template>
<script>
...
mounted() {
axios.get('/nova-vendor/fullcalendar/produzioni').then(response => {
//get the events
}
}
</script>
The config section is ignored, or is inserted in the wrong place.
Can you help me?
Thanks!
Roberto
Related
I know this has been asked in several other posts on StackOverflow, though I'm still running into a wall with trying to solve my issue. I'm very much new to Vue and trying to learn this stack but having some struggles with this aspect
PROBLEM: In following along with a tutorial I have a page called "Menu Editor" that uses Vue Router to automatically redirect the user to a child component called "Category Manager" within the Menu Editor page. However, when on the "Menu Editor" page the prop data will not show regardless of what I've attempted thus far (reading and trying solutions proposed in similar posts such as this)
from my menu editor vue file, i know the issue lies with
<router-view v-bind:inital-categories="categories"></router-view>
from my app.js file I have my two components registered as such
Vue.component('category-manager', require('./components/category-manager.vue').default);
Vue.component('menu-editor', require('./components/menu-editor.vue').default);
my menu-editor.vue file
<template>
<div>
<h1>Menu Editor</h1>
<router-link :to="{name: 'categories'}">Categories</router-link>
<router-link :to="{name: 'add-item'}">Add Item</router-link>
<router-view v-bind:inital-categories="categories"></router-view>
</div>
</template>
<script>
import VueRouter from 'vue-router';
import CategoryManager from './category-manager.vue';
import MenuItem from './menu-item.vue';
export default {
props:['categories'],
router: new VueRouter({
mode: 'history',
routes: [
{
path: '/categories',
name: 'categories',
component: CategoryManager
},
{
path: '/menu-editor',
redirect: {name: 'categories'}
},
{
path: '/add-item',
name: 'add-item',
component: MenuItem
}
]
})
}
</script>
<style scoped>
a{
border: solid 1px black;
padding: 10px;
margin: 0;
}
.router-link-active{
font-weight: bold;
border-bottom: none;
}
</style>
my category-manager.vue file
<template>
<form #submit.prevent="saveCategories">
<a #click="addCategory(index)" class="add">+ add category</a>
<div v-for="(category,index) of categories" :key="category.id">
<input type="text" v-model="category.name" :ref="category.name">
<input type="number" v-model="category.display_order">
<a #click="removeCategory(index)" class="remove">delete</a>
<div>
<img v-if="category.image" :src="`/images/${category.image}`" width="100">
<label v-else>Image: </label>
<input type="text" v-model.lazy="category.image">
</div>
<hr>
</div>
<button type="submit">Save</button>
<div>{{ feedback }}</div>
</form>
</template>
<script>
export default {
props: ['initialCategories'],
data(){
return{
categories: _.cloneDeep(this.initialCategories),
feedback: '',
};
},
methods: {
removeCategory(index){
if(confirm('are you sure?')){
let id = this.categories[index].id;
if(id > 0){
console.log('calling delete /api/categories/' + id);
axios.delete('/api/categories/' + id);
}
this.categories.splice(index,1);
}
},
addCategory(index){
this.categories.push({
id: 0,
name: '',
display_order: this.categories.length + 1
});
this.$nextTick(() =>{
window.scrollTo(0, document.body.scrollHeight);
this.$refs[''][0].focus();
});
},
saveCategories(){
axios.post('/api/categories/upsert', {
categories: this.categories
})
.then((res) => {
if(res.data.success){
this.feedback = 'Changes saved.';
categories = res.data.categories;
}
});
}
}
}
</script>
<style scoped>
img {
vertical-align: middle;
}
hr {
margin-bottom: 30px;
}
</style>
my menu-editor.blade.php file
#extends('layouts.app')
#section('title', '- Menu Editor')
#section('content')
<menu-editor :categories="{{ $categories }}"></menu-editor>
#endsection
my AdminController.php file
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Categories;
class AdminController extends Controller
{
//
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function menu(){
//
$categories = Categories::orderBy('display_order')->get();
return view('admin.menu-editor', [
'categories' => $categories
]);
}
}
When on the "Menu Editor" the view returns as such
with the data returned to the DOM as "[object Object],[object Object]" instead of the objects being rendered correctly.
inital-categories="[object Object],[object Object]"
However, when I go directly to the "/categories" page without first going to the "Menu Editor", the data shows fine.
This is what the "categories" page looks like when visited directly (without having the two menu buttons at the top of the page as the Menu Editor does)
Can someone please show me where I am going wrong so that I can correctly show the prop data on the Menu-Editor page? Thanks in advance! I'm sure that I'm overlooking something silly but would really appreciate any help in finding and fixing my error.
I decided to create a small project in new technology and I choose Gatsby. To let you know I don't work with React and GraphQl before. So thanks to Gatsby I can see also other technologies. So, for now, I try to make an index survey page where the footer and header are modifiable. I take for my backend Contentful and I succeed to do the connection between the content from ContentFul and my component footer. But when I try to do a query in the page index.js impossible to get the data, but they exist (I checked on graphql).
I try to make the query in the component, make the query in a hook and then call the hook. But nothing changes always undefined
In my index.js:
const query = graphql`
query header{
contentfulHeader {
id
titleCard
descriptionCard
logoCard {
file {
url
}
}
}
}
`
const SurveyTitleCard = props => {
return (
<>
<div className="row">
<div className="survey-title card blue-grey darken-3 col s10 offset-s1 m6 offset-m3">
<div className="card-content grey-text text-lighten-3 center-align">
<div className="row logo valign-wrapper">
<div className="col s6 offset-s3 m4 offset-m4">
<img
className="responsive-img"
src=""
alt="logo company"
/>
</div>
</div>
<div className="card-title">
{query.contentfulHeader.titleCard}
</div>
<p>We would love to hear your anonymous thoughts and feedback</p>
</div>
</div>
</div>
</>
)
}
// INDEX PAGE
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<SurveyTitleCard />
</Layout>
)
Here the data from GraphQl:
Here my gatsby-config.js:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `#AntoineB`,
},
plugins: [
{
resolve: `gatsby-source-contentful`,
options:{
spaceId: `MY_SPACE_ID`,
accessToken: `MY_ACCESS_TOKEN`,
},
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
See the docs regarding querying data in components using StaticQuery
import React from "react"
import { StaticQuery, graphql } from "gatsby"
export default () => (
<StaticQuery
query={graphql`
query header{
contentfulHeader {
id
titleCard
descriptionCard
logoCard {
file {
url
}
}
}
}
`}
render={data => (
<>
<div className="row">
<div className="survey-title card blue-grey darken-3 col s10 offset-s1 m6 offset-m3">
<div className="card-content grey-text text-lighten-3 center-align">
<div className="row logo valign-wrapper">
<div className="col s6 offset-s3 m4 offset-m4">
<img
className="responsive-img"
src=""
alt="logo company"
/>
</div>
</div>
<div className="card-title">
{data.contentfulHeader.titleCard}
</div>
<p>We would love to hear your anonymous thoughts and feedback</p>
</div>
</div>
</div>
</>
)}
/>
)
I'm using a resuable component for button wherein i wanna pass the color and bgColorvia props, color gets applied but then the background color doesnt apply
const useStyles = makeStyles(theme => ({
button: {
//width:'100%',
margin: theme.spacing(1)
},
input: {
display: "none"
}
}));
export default function ContainedButtons(props) {
const classes = useStyles();
const btnStyle = {
color: props.color,
backgroundColor: props.bgClrRed
};
console.log(props);
return (
<div>
<Button
variant="contained"
style={{ backgroundColor: props.bgClrRed, color: props.color }}
fullWidth="true"
className={classes.button}
>
{props.name}
</Button>
<Button
variant="contained"
style={btnStyle}
fullWidth="true"
className={classes.button}
>
{props.name}
</Button>
</div>
);
}
I'm missing something I don't know what can anyone please lemme know
Updates
import ContainedButtons from '../container/buttonsControl';
import css from '../variable.scss';
Try a spread operator:
style={...btnStyle}
I am trying to use Vue Multiselect V2 in my Laravel 5.3 project. I am using this example, http://monterail.github.io/vue-multiselect/#sub-single-select
I have the following setup, in my app.js file:
Vue.component('multiselect', require('./components/Multiselect.vue'));
var vm = new Vue({
el: '#app'
});
In the Multiselect.vue file
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
}
}
</script>
And I am calling it in the blade as below:
<div id="app">
<label class="typo__label">Single select</label>
<multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
<pre class="language-json"><code>#{{ value }}</code></pre>
</div>
This is how it displays in the DOM
<div id="app">
<label class="typo__label">Single select</label>
<!---->
<pre class="language-json"><code></code></pre>
</div>
Currently the dropdown does not display, and I don't see any errors in the console. I would have expected to add a template in somewhere but I couldn't find any mention of that in the Vue Multiselect docs.
For anyone having these issues, do not follow the examples on the official documentation. They do not work, rather use this from their Github page. https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage
Basic example
<template>
<div>
<multiselect
v-model="selected"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
selected: null,
options: ['list', 'of', 'options']
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
For updating the array from vue multiselect use #select and #remove events
Example: <multiselect #select="selectionChange" #remove="removeElement"> </multiselect>
Into methods add the next functions
methods: {
removeElement() {
this.$forceUpdate();
},
selectionChange() {
this.$forceUpdate();
},
}
this.$forceUpdate(); will update the state.
Is it possible to display two/three months?
Even I wanted the same and did something like this.
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td>
</td>
<td>
<input type="button" id="myprevbutton" value=" ◄ " />
<input type="button" id="mynextbutton" value=" ► " />
</td>
<td>
</td>
</tr>
<tr>
<td width="33%">
<div id='calendar0'>
</div>
</td>
<td width="33%">
<div id='calendar1'>
</div>
</td>
<td width="33%">
<div id='calendar2'>
</div>
</td>
</tr>
</table>
and in JS
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar0').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
month:m-1,
theme: true,
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
month:m+1,
theme: true,
});
$('#calendar1').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
theme: true,
editable: false,
});
$('#myprevbutton').click(function() {
$('#calendar0').fullCalendar('prev');
$('#calendar1').fullCalendar('prev');
$('#calendar2').fullCalendar('prev');
});
$('#mynextbutton').click(function() {
$('#calendar0').fullCalendar('next');
$('#calendar1').fullCalendar('next');
$('#calendar2').fullCalendar('next');
});
});
TL;DR
Cannon has posted a modified FullCalendar which allows a calendar to span across more than one month, however this seems to run all the months into eachother, and is bound to an earlier version of FullCalendar.
Here's my take on 3 separate calendars, which hides the navigation on two calendars and synchronizes the months on the main calendar: jsFiddle
Details
Set up the 3 calendars - in my case the main calendar with smaller 'look behind / look ahead' calendars to the next and previous months:
<div id='calendarPrev' style='width:50%'></div>
<div id='calendarCurrent' style='width:100%'></div>
<div id='calendarNext' style='width:50%'></div>
DRY up the calendar initialization with a function with optionally hides the navigation:
function initCalendar($calendarDiv, displayDate, isMain) {
$calendarDiv.fullCalendar({
defaultDate: displayDate,
header: {
left: 'title',
center: '',
right: isMain
? 'today prev,next'
: ''
},
events: ... eventdata callbacks etc
});
}
In the $(document).ready, set the initial date of the 3 calendars around today, but exactly 1 month apart, hiding the navigation on the two secondary calendars. Then wire additional event handlers on the 'main' calendar's next and prev buttons which keep the 3 calendars in synch:
$(document).ready(function() {
initCalendar($('#calendarCurrent'), moment(), true);
initCalendar($('#calendarPrev'), moment().subtract(1, 'months'), false);
initCalendar($('#calendarNext'), moment().add(1, 'months'), false);
$('body').on('click', 'button.fc-prev-button', function() {
$('#calendarPrev').fullCalendar('prev');
$('#calendarNext').fullCalendar('prev');
// allow main calendar event to propogate
});
$('body').on('click', 'button.fc-next-button', function() {
$('#calendarPrev').fullCalendar('next');
$('#calendarNext').fullCalendar('next');
// allow main calendar event to propogate
});
}
The documentation for FullCalendar should help you answer that (which is well documented, BTW). I found this doing a quick search for your answer.
EDIT: digging a tad further, I found this as well which indidcates it's not a primary feature but there are some things you can do to mimic what you want.
# John Smith -- I've created 3 calendars and so far it seems to be working for me but instead of dragging events, mines are just simply saving events title, start, end with the ability to edit them.
One alternative can be, show the required no of weeks in basicWeek view. It renders as a tab showing 2 Months.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
views: {
basicWeek: {
type: 'basic',
duration: {weeks: 8},
rows: 8
}
}
}
With the team I work in, we came up with this solution (for Vue.js, but it can by applied to any version). You can have in a single calendar many months and they are differentiated from each other by the name of the month in the first day of it and by the background color. It works pretty well and, in contrast with the solution of having multiple instances of the calendar, here you can drag and drop events from one month to the other and create events that start in one month and end in the other.
https://github.com/fullcalendar/fullcalendar/issues/470#issuecomment-565542643
It looks like this:
Add to first, second and third months this:
defaultDate:'2016-07-01',