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

Exploring Ways to Navigate to a Component Two Steps Back in Angular

Let's say I have three routes A->B->C. I travel from A to B and then from B to C. Now, is it possible for me to go directly from C to A? ...

The preflight request for CORS failed the access control check due to not receiving an HTTP ok status

How can I resolve this issue? Backend: ASP .Net Web APP - API, IIS Frontend: Vue Error: https://i.stack.imgur.com/QG1Yw.png https://i.stack.imgur.com/3tKh7.png Fiddler: https://i.stack.imgur.com/diN08.jpg web.config: <httpProtocol> <cus ...

Compiling SSR index.html file is in progress

Currently using the Go and VueJS stack, but encountered an issue with SSR. The index.html is precompiled with GO to generate meta tags (using html/template) {{ range index . "metaTags" }} <meta {{.Key |safe }}='{{ .Name }}' {{ .Ty ...

Running into the error message 'TypeError: Cannot invoke a class as a function' while utilizing Ziggy for Vue within Laravel

I have been searching endlessly for a solution to my issue without any luck. Here are the steps I have taken: \\Webpack.mix.js const mix = require('laravel-mix'); const path = require('path'); mix.webpackConfig({ resolve: ...

The JSON response is displaying [object object] instead of an array

I am currently facing an issue with my Sencha touch app where the json data I am feeding into it is not returning the image URLs as expected. Instead, it is showing me "[object Object]" when I console.log the "images" property. Here is a snippet of the js ...

Ensure there is a gap between each object when they are arranged in a

Is there a way to customize the layout of elements in the ratings view so that there is automatic spacing between them? I considered using text (white spaces) for this purpose, but it seems like an inefficient solution. Are there any other alternatives to ...

What is the process for extracting the period value from SMA technical indicators within highcharts?

Can someone assist me in retrieving the period value from SMA indicator series by clicking on the series? series : [{ name: 'AAPL Stock Price', type : 'line', id: 'primary', ...

What is the best way to store an ES6 Map in local storage or another location for later use?

let map = new Map([[ 'a', 1 ]]); map.get('a') // 1 let storageData = JSON.stringify(map); // Saving in localStorage. // Later: let restoredMap = JSON.parse(storageData); restoredMap.get('a') // TypeError: undefined is not a ...

Utilizing database information to dynamically select Nightwatch.js tests for execution

Currently, I am in the process of configuring nightwatch tests for a specific website. The setup involves assigning testing personas to run tests, which works smoothly in our development environment. However, we face an issue when we need to dynamically ad ...

iOS app launch does not trigger Phonegap handleOpenURL

Receiving an alert message when the app is open in the background. However, when I close the app from the background and then relaunch it, the alert message doesn't appear. The handleOpenURL function cannot be invoked in JavaScript when the app is lau ...

The jQuery `.load` function appears to be malfunctioning

I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...

Utilizing PUG for Iterating Through Multiple Items in Express Framework using JSON Data

I'm currently working on a small application using Express and PUG, aiming to achieve the following: https://i.stack.imgur.com/ZDyTK.png index.pug ul#restaurants-list li img.restaurant-img(alt='Mission Chinese Food', sr ...

Utilizing the smallslider feature through jQuery/JavaScript operations

I've recently embarked on the journey of learning JavaScript/jQuery. I've been attempting to incorporate this cool effect, but unfortunately, I'm facing some difficulties with it: My goal is to understand how to execute this effect using Ja ...

Navigating a path and executing unique functions based on varying URLs: A guide

I am trying to send a post request to the path /users and then right away send another post request to /users/:id. However, I need the actions to be different for each of these URLs, so I cannot use the array method to apply the same middleware. The goal ...

In the world of Node.js, an error arises when attempting to read properties of undefined, particularly when trying to access the

I am currently attempting to integrate roomSchema into a userSchema within my code. Here is the snippet of code I am working with: router.post('/join-room', async (req, res) => { const { roomId, userId } = req.body; try { const user = ...

An issue occurred with a malformed JSON string when attempting to pass JSON data from AngularJS

I am facing an issue with passing a JSON string in an ajax request. Here is the code snippet: NewOrder = JSON.stringify (NewOrder); alert (NewOrder); var req = { url: '/cgi-bin/PlaceOrder.pl', method: 'POST&apo ...

Why does my computed property become undefined during unit testing of a head() method in Vue.js with Nuxt.js?

In my Vue.js + Nuxt.js component, I have implemented a head() method: <script> export default { name: 'my-page', head() { return { title: `${this.currentPage}` }; }, ... } </script> ...

Converting an HTML div to a string for export

In the process of developing my application, I am utilizing an angular widget to construct a dynamic dashboard. Here is the snippet of HTML code along with the associated JavaScript that enables this functionality: <div class="page" gridster="gridsterO ...

Having trouble with v-for in Vue js on vsCode?

https://i.stack.imgur.com/u3vzh.png It seems that I always encounter this issue when utilizing v-for in my projects. While I didn't face any problems with it previously, I've noticed that it has become a frequent error as of late. Why is it tha ...