Which internal API allows for navigating to the daygridmonth, timegridweek, and timegridday views using a custom button?

I am looking to have the dayGridMonth displayed when I click on a custom button within FullCalendar. The functionality I want is for the dayGridMonthFunc to access the internal API daygridmonth and display the screen as a month.

<div>           
 <FullCalendar
                class='bit-calendar'
                :options="config"
                ref="fullCalendar"
                locale=ko
                defaultView="dayGridMonth"
                :header="{
                  left: 'prev,next today',
                  center: 'title',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay'
                }"
                :headerToolbar="{
                  left: 'prev,next today',
                  center: 'title',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay'
                }"
                :customButtons="{ 
                  dayGridMonth: {
                    text: '월',
                    click: this.dayGridMonthFunc
                  },
                  timeGridWeek: {
                    text: '주',
                    click: this.timeGridWeekFunc
                  },
                  timeGridDay: {
                    text: '일',
                    click: this.timeGridDayFunc
                  },                  
                }"
              />
</div>

methods: {
   dayGridMonthFunc(event) {
        console.log(event);
   }
}

Answer №1

If you're looking to change the view in fullCalendar, the documentation already provides a clear explanation here: ChangeView.


Surprisingly, creating custom buttons is unnecessary for this task! Simply switch the locale to Korean:

locale: "ko"

In Vue-specific syntax:

locale="ko"

I noticed you attempted using locale=ko in your code, but remember to add quotation marks around "ko" and ensure the additional locale module is loaded.

Check out this functional demo using native JS (since I'm unfamiliar with Vue): https://codepen.io/ADyson82/pen/oNZbmRB - you'll see that the default display includes the Korean characters without any custom configuration needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

watchWebpack is compiling all the files

As per the webpack documentation on watching files webpack can keep an eye on files and recompile them whenever there are changes. My understanding is that this implies webpack will only compile the files that have been modified. I have a configuratio ...

Dynamically update a directive array in Vue.js based on real-time changes

In my Vue project, I have an array defined in the data() method that is populated through a custom directive in its bind hook. Here's the code snippet: import Vue from 'vue' export default { el: '#showingFilters', name: "Filte ...

Implementing Express 4: The Correct Way to Serve Routes from External Files

Something about my Express 4 application is causing me frustration. Here's the configuration: routes/profile.js var express = require('express'); var router = express.Router(); router.get('/profile', function(req, res) { res.s ...

Implementing JavaScript to showcase a list extracted from an API dataset

I'm currently undertaking a project where I am integrating an API from a specific website onto my own webpage. { "data": [{ "truckplanNo":"TCTTV___0D010013", "truckplanType":"COLLECTION", " ...

Stripping quotation marks from CSV information using Javascript

After performing a fetch request using JavaScript, I have converted JSON data into CSV format. datetime","open","high","low","close","volume" "2020-01-28","312.48999","318.39999","312.19000","317.69000","31027981" "2020-01-27","309.89999","311.76001","30 ...

Sending postMessage during the beforeunload event does not work as expected

When postMessage() is triggered within the beforeunload window event in an Ionic 2 browser, I've noticed that the message doesn't make it to the parent. However, if the same message is sent during the unload or load event, it is received successf ...

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

Collaborate on global functions across the Quasar ecosystem and beyond, including Vue3

Is it plausible to utilize this method for sharing functionality (not data, which is handled by stores) in a Quasar and Vue3 application? // boot/generic_stuff.js import {boot} from 'quasar/wrappers' const function_list = { /* content goes here ...

Errors in production arise from building React applications

I am new to using React and recently built a ToDo web app following a tutorial. Everything seemed fine during development, but when I tried to view the production version locally using serve -s build, two errors popped up that were not present before. reac ...

Inquiry about JavaScript Arrow Function syntax issue

At the outset, I apologize for the vague title. It's challenging to explain without a direct demonstration. As a newcomer to JavaScript, I've been diving into arrow functions. However, there's a syntax of arrow function that I'm unfamil ...

Learn how to display JSON data sent from the server on a webpage

I'm just starting out with jquery. I have an api called '/categories' that gives me a json object of categories. The response looks like this: [ { name: "Laptop deals", slug: "laptop-deals", imageURL: "image.jpg", id: 1 }, { name: "Fashion ...

Have you ever wondered why req.body returns as undefined when using body parser?

Every time I attempt to make a post request, I keep receiving an error message stating that req.body is returning as undefined. Below is the content of my server.js file: import express from 'express'; import bodyParser from 'body-parser&ap ...

Connecting multiple promises using an array

After making an ajax call to retrieve an array of results, I have been attempting to process this data further by making additional ajax calls. However, when using Promise.all() and then continuing with .then(function(moreData){}), I noticed that the moreD ...

Is there a method to access the output of getStaticProps function from NextJS API routes?

Is there a method to compute and cache new data during build time that is essential for both the front-end and back-end API routes? I'm looking for a way to access the static properties generated by API routes at build time since the routes are access ...

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

As I develop a service in Angular to display components inside a modal, I have encountered an issue. After injecting the component content into the modal and adding it to the page's HTML, the functionality within the component seems to be affected. F ...

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

Using AngularJS to transfer data from a datepicker to an ng-model

I am currently trying to figure out how to pass the date from a datetimepicker into the model. Unfortunately, I am facing some challenges with this process. I wish I could provide a demo of the issue on a fiddle, but I am unsure of how to do so due to the ...

"Discover the method of linking one input to another in a way that modifying one will automatically modify the

I am currently utilizing Vue 2.x through the <script> tag. The page I have consists of a list of users displayed in a table, where users can edit their information: name description1 description2 1st name input 1 ...

Encountering issues with installing NPM

I encountered an issue while attempting to install NPM on a repository that I have cloned locally from GitHub. The error message displayed is causing me some trouble. Can someone help me figure out how to fix this problem? Thank you in advance! npm ERR! p ...

What causes fs to produce an error when routing to a new page, yet refreshing the page resolves the issue?

Concern: I have developed a NextJs application with 4 input fields, each connected to a predefined options list read in as a json file within the project. The user can select two fields and then proceed to a search page by clicking a button. From the sear ...