CODEWITHSUNDEEP
javascriptreactjsdom-events
Amit
Amit

Reputation: 1

react-add-to-calendar all day event

I'm using react-add-to-calendar package to render "add to my calendar" button on my app.

On their documentation you can find examples for the right way of passing event to their component. The only issue I have is how to pass startTime and endTime to notify my event is an all day event. I tried some options manually and to format my dates with momentJS but I failed to find the right way of doing it (if there is a one)

Hope someone has already dealt with this problem.

import React from "react";
import moment from 'moment';
import AddToCalendar from 'react-add-to-calendar';

let icon = { 'calendar-plus-o': 'left' };

class Calendar extends React.Component {

    createEvent = () => {
        const {finalDate} = this.props;

      // when i tried to format my date
      // const startTime = moment(finalDate).format("YYYY-MM-DD");
      // const endTime = moment(finalDate).format("YYYY-MM-DD");

        return {
            title: "My event",
            description: "my all day event",
            location: 'Portland, OR',
            startTime: "2020-06-21",
            endTime: "2020-06-21"
        }
    }

    render() {
        return (
            <AddToCalendar
                event={this.createEvent()}
                buttonTemplate={icon}
            />
        );
    };
}

export default Calendar;

edit: they just don't support this option.

Upvotes: 0

Views: 3447

Answers (3)

Jens
Jens

Reputation: 64

I know this is quite some old question.

Still, in case anybody is struggeling and since the referenced code is no longer maintained:

Check out my open-source solution (also supporting all-day events): https://github.com/jekuer/add-to-calendar-button

Upvotes: 0

prekolna
prekolna

Reputation: 1578

Unfortunately, I don't think all day events are supported; c.f. https://github.com/jasonsalzman/react-add-to-calendar/blob/master/src/helpers/index.js#L67

Upvotes: 0

masonCherry
masonCherry

Reputation: 974

Why don't you just set

{
    startTime: '2020-06-21T00:00:00',
    endTime: '2020-06-21T23:59:59'
}

Upvotes: 1

Related Questions