import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";


export default function Calendar(){

    return(
        <>
            <BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
            <div className="row">
                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
                <div className="col-lg-12">
                    <div className="card card-statistics">
                        <div className="card-header">
                            <div className="card-heading">
                                <h4 className="card-title">Event Calendar</h4>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="col-xl-3">
                                    <div id="external-events">
                                        <button className="btn btn-primary btn-block" data-toggle="modal"
                                                data-target="#eventModal">Add New Event
                                        </button>
                                        <p className="mt-3">
                                            Drag and drop your event or click in the calendar.
                                        </p>
                                        <div className="fc-event fc-event-primary" data-color="fc-event-primary">
                                            <span></span> Family
                                            Vacation
                                        </div>
                                        <div className="fc-event fc-event-warning" data-color="fc-event-warning">
                                            <span></span> Meeting In
                                            Office
                                        </div>
                                        <div className="fc-event fc-event-danger" data-color="fc-event-danger">
                                            <span></span> Client Call
                                        </div>
                                        <div className="fc-event fc-event-success" data-color="fc-event-success">
                                            <span></span> Interview
                                        </div>
                                        <div className="form-check">
                                            <input className="form-check-input" type="checkbox" value=""
                                                   id="defaultCheck1" />
                                                <label className="form-check-label" htmlFor="defaultCheck1">
                                                    Remove After Drop
                                                </label>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-9">
                                    <div className="event-calendar">
                                        <div id="event-calendar"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}