VueJS

It’s fun to use Vue 3 without NodeJS, CLI, NPM, or Webpack! Simple and Easy! Let’s see what needs to be done to use vue-simple-calendar (https://github.com/richardtallent/vue-simple-calendar) Add the following reference to index.html:  (download from https://unpkg.com/vue-simple-calendar@6.0.0-b3/static/css/)   <link rel=”stylesheet” href=”assets/css/style.css” />     <link rel=”stylesheet” href=”assets/css/default.css” />     <link rel=”stylesheet” href=”assets/css/holidays-us.css” />  <script src=”https://unpkg.com/vue-simple-calendar@6.0.0-b3/dist/vue-simple-calendar.umd.js” ></script> Add the references to your component as shown below: const Home = {   components: {     “calendar-view”: window.CalendarView.CalendarView,     “calendar-view-header”: window.CalendarView.CalendarViewHeader   },   setup() {    const showDate = ref(new Date(‘3/15/2021’));     const setShowDate = (d) => {       console.log(“Called!! “, d)       showDate.value = d;     }     return {       name: “Hi Agami”,       showDate,       setShowDate     };   }, template: html`   <div>     <h1>{{ name }}</h1>     <calendar-view :show-date=”showDate” class=”theme-default holiday-us-traditional holiday-us-official”>       <template #header=”{ headerProps }”>         <calendar-view-header :header-props=”headerProps” @input=”setShowDate” />       </template>     </calendar-view>   </div>   <h2>Ends Here</h2>   `, }; export default Home; That’s …

Continue reading Vue 3 Scheduling Calendar