[question] Examples

[alfligno]

Does the example are being shared? I can't seem to find it on the docs, though there is demo.html but it does not look like the example page, I'm trying to work with the calendar, which uses custom slot :)

[trenzasoft]

I need to use Custom Calendars with todo but cant find any code block. can some one help me here?

[alfligno]

In my case, I copy on how the view was made on this link in order to come up with this view

<v-calendar
    class='v-calendar w-100'
    ref="calendar"
    v-bind:min-date='calendar.minDate'
    v-bind:max-date='calendar.maxDate'>
    <template slot="day-content" class='h-100' scope='{day, dayEvents, attributes, attributesMap}'>
        <div class="flex flex-column h-100 overflow-hidden">
            <span class="day-label text-sm text-gray-900">{{day.day}}</span>
            <div class="flex-grow h-100 calendar-event" v-if='eventDates.includes(formatDate(day).format("YYYY-MM-DD"))'>
                <small
                    @click.prevent='$router.push(`${root_link}/calendars/${event.post_type}/${event.slug}`)'
                    class="badge mb-2"
                    v-for='event in events(formatDate(day).format("YYYY-MM-DD"))'
                    style='white-space: pre-wrap; cursor: pointer;'
                    v-bind:class='{"badge-info": event.post_type==="webinar", "badge-danger": event.post_type==="event"}'>{{event.title}}</small>
            </div>
        </div>
    </template>
</v-calendar>

.v-calendar >>> .vc-day {
    padding: 0 5px 3px;
    border: 1px solid #e4e4e4;
    min-height: 100px;
    height: 100px;
    max-width: 115px;
    overflow-y: auto;
}
.v-calendar >>> .vc-day.weekday-7,
.v-calendar >>> .vc-day.weekday-1
{
    background-color: #eff8ff;
}
.v-calendar >>> .calendar-event{
    overflow-y: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.v-calendar >>> .calendar-event::-webkit-scrollbar {
    display: none;
}

[trenzasoft]

In my case, I copy on how the view was made on this link in order to come up with this view

<v-calendar
  class='v-calendar w-100'
  ref="calendar"
  v-bind:min-date='calendar.minDate'
  v-bind:max-date='calendar.maxDate'>
  <template slot="day-content" class='h-100' scope='{day, dayEvents, attributes, attributesMap}'>
      <div class="flex flex-column h-100 overflow-hidden">
          <span class="day-label text-sm text-gray-900">{{day.day}}</span>
          <div class="flex-grow h-100 calendar-event" v-if='eventDates.includes(formatDate(day).format("YYYY-MM-DD"))'>
              <small
                  @click.prevent='$router.push(`${root_link}/calendars/${event.post_type}/${event.slug}`)'
                  class="badge mb-2"
                  v-for='event in events(formatDate(day).format("YYYY-MM-DD"))'
                  style='white-space: pre-wrap; cursor: pointer;'
                  v-bind:class='{"badge-info": event.post_type==="webinar", "badge-danger": event.post_type==="event"}'>{{event.title}}</small>
          </div>
      </div>
  </template>
</v-calendar>

.v-calendar >>> .vc-day {
  padding: 0 5px 3px;
  border: 1px solid #e4e4e4;
  min-height: 100px;
  height: 100px;
  max-width: 115px;
  overflow-y: auto;
}
.v-calendar >>> .vc-day.weekday-7,
.v-calendar >>> .vc-day.weekday-1
{
  background-color: #eff8ff;
}
.v-calendar >>> .calendar-event{
  overflow-y: auto;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.v-calendar >>> .calendar-event::-webkit-scrollbar {
  display: none;
}

Hello

Thank you for your reply. Can you please share the JS code? I am still struggling to figure it out.

[alfligno]

JS Code? I just installed the package link and use it as is, the code above is the modification/replication I made in order to come up with the same UI as mentioned :)

[trenzasoft]

JS Code? I just installed the package link and use it as is, the code above is the modification/replication I made in order to come up with the same UI as mentioned :)

Hello Alfligno,

I am very much sorry to asking you again. Actually I can't manage the JS code from the v-calendar js package for the Custom Calendars view we are discussing here. I need a vue js calendar with some text/link over the date - just like the Custom Calendars.

I am trying to implement it on laravel-vuejs. I have used const calendar = this.$refs.calendar; at mounted() - and return { attributes: [ { key: 'today', highlight: true, dates: new Date() } ],
}

at data()

[alfligno]

if you are using $refs then your v-calendar tag should be <v-calendar ref="Calendar"></v-calendar> and use it on your mounted method as this.$refs.Calendar

<template>
<v-calendar
    class='v-calendar w-100'
    ref="Calendar"
    v-bind:min-date='calendar.minDate'
    v-bind:max-date='calendar.maxDate'>
    <template slot="day-content" class='h-100' scope='{day, dayEvents, attributes, attributesMap}'>
        <div class="flex flex-column h-100 overflow-hidden">
            <span class="day-label text-sm text-gray-900">{{day.day}}</span>
            <div class="flex-grow h-100 calendar-event">
                <small
                    @click.prevent='$router.push("/calendar")'
                    class="badge mb-2"
                    v-for='event in [{"title": "Test Event", "post_type": "webinar"}]'
                    style='white-space: pre-wrap; cursor: pointer;'
                    v-bind:class='{"badge-info": event.post_type==="webinar", "badge-danger": event.post_type==="event"}'>{{event.title}}</small>
            </div>
        </div>
    </template>
</v-calendar>
</template>
<script>
export default {
 ...
mounted() {
 this.$refs.Calendar
}
...
}
</script>

[trenzasoft]

Thank you again for the quick help. Here is my vuejs file. At app.js I have called the vcalendar package as:

import VCalendar from 'v-calendar';
Vue.use(VCalendar);

<template>
    <div class="">       
        <v-calendar
            class='v-calendar w-100'
            ref="calendar"
            v-bind:min-date='calendar.minDate'
            v-bind:max-date='calendar.maxDate'>
            <template slot="day-content" class='h-100' scope='{day, dayEvents, attributes, attributesMap}'>
                <div class="flex flex-column h-100 overflow-hidden">
                    <span class="day-label text-sm text-gray-900">{{day.day}}</span>
                    <div class="flex-grow h-100 calendar-event" v-if='eventDates.includes(formatDate(day).format("YYYY-MM-DD"))'>
                        <small
                            @click.prevent='$router.push(`${root_link}/calendars/${event.post_type}/${event.slug}`)'
                            class="badge mb-2"
                            v-for='event in events(formatDate(day).format("YYYY-MM-DD"))'
                            style='white-space: pre-wrap; cursor: pointer;'
                            v-bind:class='{"badge-info": event.post_type==="webinar", "badge-danger": event.post_type==="event"}'>{{event.title}}</small>
                    </div>
                </div>
            </template>
        </v-calendar>
    </div>
</template>
<script>
    export default{

        mounted() {            
            const calendar = this.$refs.calendar;      
        },        
        data(){           

            return {
                attributes: [
                        {
                            key: 'today',
                            highlight: true,
                            dates: new Date()
                        }
                    ],               
            }
        },
        methods:{

        },
        created: function(){

        },
        computed: 
        {

        }
    }
</script>
<style>
.v-calendar >>> .vc-day {
    padding: 0 5px 3px;
    border: 1px solid #e4e4e4;
    min-height: 100px;
    height: 100px;
    max-width: 115px;
    overflow-y: auto;
}
.v-calendar >>> .vc-day.weekday-7,
.v-calendar >>> .vc-day.weekday-1
{
    background-color: #eff8ff;
}
.v-calendar >>> .calendar-event{
    overflow-y: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.v-calendar >>> .calendar-event::-webkit-scrollbar {
    display: none;
}
</style>

[alfligno]

Your code has errors, first your are using eventDates on template which is does not exists on the data property,

try replacing it with this code

<v-calendar
    class='v-calendar w-100'
    ref="Calendar">
    <template slot="day-content" class='h-100' scope='{day, dayEvents, attributes, attributesMap}'>
        <div class="flex flex-column h-100 overflow-hidden">
            <span class="day-label text-sm text-gray-900">{{day.day}}</span>
            <div class="flex-grow h-100 calendar-event">
                <small
                    @click.prevent='$router.push("/calendar")'
                    class="badge mb-2"
                    v-for='event in [{"title": "Test Event", "post_type": "webinar"}]'
                    style='white-space: pre-wrap; cursor: pointer;'
                    v-bind:class='{"badge-info": event.post_type==="webinar", "badge-danger": event.post_type==="event"}'>{{event.title}}</small>
            </div>
        </div>
    </template>
</v-calendar>

[alfligno]

I see now, why you have errors on calendar

the calendar variable does not exists on your data property

this was use at the v-calendar tag, which define the max and min date, removing it will solve the issue 👍

[trenzasoft]

No luck - same issue.

[alfligno]

remove v-bind:min-date='calendar.minDate' that uses calendar on your v-calendar

[trenzasoft]

Yes I have some view now.