Not sure how to customize about dayspan-vuetify HOT 12 CLOSED

When in doubt, the code is your friend!

There are a couple different ways to do what you want to do depending on precisely what you want to do.

1. If you want all "location" inputs and displays hidden you do this:

Vue.use( DaySpanVuetify, {
  data: {
    supports: {
      location: false
    }
  }
});

(checkout this to see global event detail stuff)

2. If you want "location" inputs on all create popover to be hidden...

Vue.use( DaySpanVuetify, {
  data: {
    defaults: {
      dsCalendarEventCreatePopover: {
        prompts: { location: false }
      }
    }
  }
});

(checkout this for defaults on that component that you can specify as props or override globally)

3. If you want to do it for a specific popover you can use the props

<ds-calendar-event-create-popover
  :prompts="{location: false}"
></ds-calendar-event-create-popover>

(checkout here)

4. If you wish to override the input for the location field there's a scoped slot for that:

<ds-calendar-event-create-popover>
<div slot="eventCreatePopoverLocation" slot-scope="{ details }">
  <v-text-field
    single-line hide-details solo flat full-width
    label="Where dis at?"
    v-model="details.location"
  ></v-text-field>
</div>
</ds-calendar-event-create-popover>

(checkout here)

5. If you wish to add a new field:

<ds-calendar-event-create-popover>
<div slot="eventCreatePopoverBodyBottom" slot-scope="{ details, calendarEvent, calendar }">
   Here are some new fields!
</div>
</ds-calendar-event-create-popover>

(checkout here)

You can basically do that for all event details.

from dayspan-vuetify.

You have one object in slotData, so you can either extract the variables you want from slotData, or reference it like so:

<template slot="eventPopover" slot-scope="slotData">
            <v-btn @click.native="slotData.close">Close</v-btn>
</template>

OR

<template slot="eventPopover" slot-scope="{ close }">
            <v-btn @click.native="close">Close</v-btn>
</template>

See this for more info on scoped slots: https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope

from dayspan-vuetify.

I am getting a Missing required prop: "calendarEvent" in examples 3,4, and 5 that you gave. What should I pass on to "calendarEvent" prop in ds-calendar-event-create-popover component.

from dayspan-vuetify.

The above code samples are not complete pieces of code. I'm just showing where things are placed relatively speaking.

Checkout this file to see where the create popover is specified.

You add props and slots in there.

from dayspan-vuetify.

I am slowly getting a hang of this. Slots and scopes were new to me. So learning new things. I am stuck with this one.

I want to change the labels and actions of these buttons but in this particular part of the component, there are no named slots that I can replace. How can I add different labels and attach action to clicks on those options. Appreciate the help!

from dayspan-vuetify.

There is a slot named eventPopoverToolbarActions that you can override inside your <ds-calendar-event-popover> definition.

from dayspan-vuetify.

Found here:

https://github.com/ClickerMonkey/dayspan-vuetify/blob/master/src/components/CalendarEventPopover.vue#L31

from dayspan-vuetify.

It did not override anything. It just shows up next to the 'action dots'.

<template slot="eventPopover" slot-scope="slotData">
                <ds-calendar-event-popover
                        v-bind="slotData"
                        @finish="saveState"
                >


                    <template slot="eventPopoverToolbarActions" slot-scope="slotData">
                        hello world
                    </template>

                </ds-calendar-event-popover>
            </template>`

I used this code.

from dayspan-vuetify.

The schedule-actions is not inside the slot. is that the issue? They are two different tags.

from dayspan-vuetify.

I am having issue closing the detail pop up now.

<template slot="eventPopover" slot-scope="slotData">
            <v-btn @click.native="close">Close</v-btn>
</template>

I just want to close the eventPopover on clicking the button. But not sure how.

from dayspan-vuetify.

Also the eventPopoverToolbarActions problem above was fixed - I don't recall who (could've been you) pointed out an error in the HTML.

It's easy to loose track of the stuff you post in here since its a closed issue.

from dayspan-vuetify.

Yeah, that was me. I created a PR. Thanks for the quick response.

from dayspan-vuetify.