Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

using the component through a CDN

See original GitHub issue

How would you use fullcalendar-vue with a CDN?

I’m getting Unknown custom element: <fullcalendar>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <link href='https://unpkg.com/@fullcalendar/core@4.1.0/main.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.css' rel='stylesheet' />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src='https://unpkg.com/@fullcalendar/core@4.1.0/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.js'></script>
  <script src="https://unpkg.com/@fullcalendar/vue@4.1.0/main.umd.js"></script>

  <script>

    document.addEventListener('DOMContentLoaded', function () {

      var app = new Vue({
        el: "#app",
        components: {
          FullCalendar: window.FullCalendarVue.default
        },
        data() {
          return {
            calendarPlugins: [window.FullCalendarDayGrid.default]
          }
        }
      });

    });

  </script>

</head>

<body>
  <div id="app">
    <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
  </div>
</body>

</html>

Issue Analytics

State:
Created 4 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

8reactions

parker-codescommented, Jul 12, 2019

It feels abnormal to be using CDNs instead of my regular npm/webpack workflow, but it’s for a legacy project that would take too long to get that set up.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<link href='https://unpkg.com/@fullcalendar/core@4.1.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.css' rel='stylesheet' />

<script src='https://unpkg.com/@fullcalendar/core@4.1.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.1.0/main.js'></script>
<script src="https://unpkg.com/@fullcalendar/vue@4.1.0/main.umd.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        new Vue({
            el: '#vue-instance',

            data: function() {
                return {
                    plugins: [
                        window.FullCalendarDayGrid.default,
                        window.FullCalendarTimeGrid.default,
                        window.FullCalendarInteraction.default,
                    ],

                    events: [
                        // initial event data
                        {
                            title: "Event Now",
                            start: new Date()
                        }
                    ]
                }
            },

            methods: {
                handleDateClick(arg) {
                    if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
                        this.events.push({
                            // add new event data
                            title: "New Event",
                            start: arg.date,
                            allDay: arg.allDay
                        });
                    }
                }
            },

            template: `
            <div>
                <FullCalendar
                    class="app-calendar"
                    defaultView="dayGridMonth"
                    ref="fullCalendar"
                    :header="{
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    }"
                    :plugins="plugins"
                    :weekends="true"
                    :events="events"
                    @dateClick="handleDateClick"
                    />
            </div>
        `,
        });

    });
</script>

2reactions

arshawcommented, Aug 1, 2020

The Fullcalendar-Vue connector now publishes a browser-global JS file in dist/main.global.js: https://cdn.jsdelivr.net/npm/@fullcalendar/vue@5.2.0/dist/main.global.min.js

A demo of how to use it: https://github.com/fullcalendar/fullcalendar/blob/master/examples/_global-vue.html

Top Results From Across the Web

How CDN Components Work Together for Faster Delivery

Content delivery networks (CDNs) improve streaming performance. A CDN cuts page load times by two-thirds or more, providing end-users with ...

CDN Components | How Can CDN solutions Help your Website

The two main components of CDN solutions are the host server and the Point of Presence (PoP) Servers. The host origin server is...

What is a CDN? | How do CDNs work? - Cloudflare

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content....

What is a CDN? How does a CDN Work? - Imperva

CDN PoPs (Points of Presence) are strategically located data centers responsible for communicating with users in their geographic vicinity. Their main function ...

How to build a CDN (1/3): introduction and basic components

CDN components The following chapters describe in more detail the individual components of the CDN that you will need: Domain — used...