function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Manish DeshmukhManish Deshmukh 

How to add a year view to a FullCalendar

I want to add a year view to a fullcalendar. I can add day, month and week. 

Below is my code.

<template>
  <div class="slds-grid slds-gutters">
    <div class="slds-col">
      <span>
        <lightning-card  title="Other">
          <p class="slds-p-horizontal_small">
          <lightning-input type="date" name="input1" label="Start date" ></lightning-input>
          <lightning-input type="date" name="input1" label="End date" ></lightning-input>
        </p> 
      </lightning-card>
      </span>
      <lightning-button variant="brand" label="Apply" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    </div>
  </div>

    <div class="slds-box outerPart">
      
      <p class="slds-m-bottom_small">Opportunity Visualizer</p>
      <!--lightning-button variant="brand" name="verifyMail" label="Sync Salesforce Tasks" onclick​={initialiseFullCalendarJs}></lightning-button-->
      <div style="background:#ffffff;" class="slds-grid slds-m-top_medium">
        <div id="calendar" class="fullcalendarjs"></div>
      </div>
      <div if:true={casesSpinner} class="slds-spinner_inline spinner-padding">
        <lightning-spinner variant="brand" 
                           alternative-text="Loading Cases"     
                           size="medium">
        </lightning-spinner>
    </div>
    </div>
  </template>
import { LightningElement, track } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FullCalendarJS from '@salesforce/resourceUrl/FullCalendarResource';
import getOppo from '@salesforce/apex/oppoCloseDate.getOppo';
//import heySfLogo from '@salesforce/resourceUrl/heySfLogo';
/**
 * @description Full Calendar JS - Lightning Web Components
 */
export default class opportunityVisualizer extends LightningElement {
//  @track eventData ;
  @track returnedOppo = [] ;
  @track finalOppo = [] ;
  @track casesSpinner = true;
  //SfLogo = heySfLogo ;

  renderedCallback() {
    Promise.all([
      loadScript(this, FullCalendarJS + '/FullCalendarJS/jquery.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalendarJS/moment.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalendarJS/fullcalendar.min.js'),
      loadStyle(this, FullCalendarJS + '/FullCalendarJS/fullcalendar.min.css'),
      // loadStyle(this, FullCalendarJS + '/fullcalendar.print.min.css')
    ])
    .then(() => {
      // Initialise the calendar configuration
      this.getTasks();
    })
    .catch(error => {
      // eslint-disable-next-line no-console
      console.error({
        message: 'Not Loading FullCalendarJS',
        error
      });
    })
  }
  initialiseFullCalendarJs() {
    var str = window.location.href;
    var pos = str.indexOf(".com/");
    var last = pos + 4;
    var tDomain = str.slice(0,last);
    for(var i = 0 ; i < this.returnedOppo.length ; i++)
    {
      this.finalOppo.push({
        start : this.returnedOppo[i].CloseDate,
        title : this.returnedOppo[i].Name,
        url : tDomain+'/lightning/r/Opportunity/'+this.returnedOppo[i].Id+'/view'
    });
    }
    const ele = this.template.querySelector('div.fullcalendarjs');
    // eslint-disable-next-line no-undef
    $(ele).fullCalendar({
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
      },
     // defaultDate: '2020-03-12',
      defaultDate: new Date(), // default day is today
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events : this.finalOppo
    });
  }
  getTasks(){
    getOppo()
        .then(result =>{   
           this.returnedOppo = JSON.parse(result);
           this.casesSpinner = false;
            this.initialiseFullCalendarJs();
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.outputResult = undefined;
        });
  }
}


Output : 

User-added image

How do I add the year view?