如何在全日历显示日期和星期几的名称?

问题描述

我正在使用完整的日历API api 在受promo.com日历启发的网站上显示日历.看起来像这样.

I am using a full calendar API api to display a calendar on my website inspired by the promo.com calendar which looks like this.

这是我使用react js组件的解决方案

Here is my solution using react js component

import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import calendartopbg from 'assets/images/calendar_bg.png';
import cloud from 'assets/images/calendar_chmurka.png';
import styled from 'styled-components';

const Calendar = () => {
    const [calendar, setCalendar] = useState('');
    const calendarRef = useRef('');

    useEffect(() => {
        if (calendarRef.current) {
             console.log(FullCalendar);
            setCalendar(new FullCalendar(calendarRef.current, {
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
                theme: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,listYear',

                  },
                  views: {
                    day: {
                      titleFormat: 'dddd, MMMM Do YYYY'
                    }
                  },

                  googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
                  events: 'en.usa#[email protected]',
                  eventClick: function(arg) {

                    // opens events in a popup window
                    window.open(arg.event.url, '_blank', 'width=700,height=600');

                    // prevents current tab from navigating
                    arg.jsEvent.preventDefault();
                  }
            }));
        }
    }, [calendarRef.current]);

    console.log(calendar);

    return (
        <>
           <CalendarBackgroundWrapper>
                <img style={imagestyle} src={calendartopbg} />
         </CalendarBackgroundWrapper>

            <CalendarContainer ref={calendarRef}>
                {calendar && calendar.render ? calendar.render(): null}
            </CalendarContainer>

        </>
    )
}

export default Calendar;

从上述解决方案中我有以下内容

From the above solution I have the following

现在我想显示我上面提供的促销内容的日期

Now I would like to show date like that of the promo I provided above meaning

应该是sun o1，mon 02，tue 03等

如何使用完整的日历API来实现??

How can I achieve that using a full calendar API.?

推荐答案

@ user9964622，由于可以使用下面的代码作为起点，因此CSS和您的代码应进一步对其进行优化:

@user9964622, As a starting point below code can be used, it should be optimized further by CSS and your code:

编写函数以获取日期名称:

Write a function to get day name:

function getDayName(date) {
    var days = new Array(7);
    days[0] = "SUN";
    days[1] = "MON";
    days[2] = "TUE";
    days[3] = "WED";
    days[4] = "THU";
    days[5] = "FRI";
    days[6] = "SAT";
    var r = days[date.getDay()];
    return (r);
}

在FullCalendar中包含以下代码:

Include following code in FullCalendar:

columnHeader: false,
dayRender: function( dayRenderInfo ) {
    var dayName = getDayName(dayRenderInfo.date);
    var dayNumber = dayRenderInfo.date.getDate();
    dayRenderInfo.el.innerHTML = dayName + "<br/>" + dayNumber;
}

您应该应用CSS来隐藏当前日期:

You should apply css to hide the current date:

.fc-day-number {display: none;}

您还可以应用样式，并在dayRender中包含更多html.

Further you can apply styles and include more html in dayRender.

这篇关于如何在全日历显示日期和星期几的名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！