前提・実現したいこと
https://fullcalendar.io/docs/react
このサイトのライブラリを使用して、googleカレンダーと連携したカレンダーを作っています。
開発途中で、reader()が全く効かなくなりました。
render()内にdiv要素を盛り込んでみても、カレンダーコンポーネントを消してみても全く反映されません。
操作しているディレクトリ位置、キャッシュ削除も試しましたが何も変わりませんでした。
ちなみにmainにdivを追加するときちんと反映されます。
何か解決策がある方がいましたらコメントお願いします。
###エラー
コンソールには以下の警告が出ています。
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
A cookie associated with a resource at http://google.com/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
該当のソースコード
import React from 'react' import FullCalendar from '@fullcalendar/react' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick import './main.scss' export default class DemoApp extends React.Component { calendarComponentRef = React.createRef() state = { calendarWeekends: true, calendarEvents: [ // initial event data { title: 'Event Now', start: new Date() } ], isSignedIn: null } componentDidMount() { window.gapi.load('client:auth2', () => { window.gapi.client.init({ clientId: "hogehoge", scope: "hogehoge" }).then(() => { const auth = window.gapi.auth2.getAuthInstance(); this.setState({ isSignedIn: auth.isSignedIn.get() }); }); }); } renderAuth() { if (this.state.isSignedIn === null) { return <div>i dont know your google account</div> } else if (this.state.isSignedIn) { return <div>login with google!!</div> } else { return <div>I can not see your google account!!</div> } } loginWithGoogle = () => { window.gapi.auth2.getAuthInstance().signIn(); } logoutFromGoogle = () => { window.gapi.auth2.getAuthInstance().signOut(); } render() { return ( <div className='demo-app'> <div className='demo-app-top'> {this.renderAuth()} <button onClick={this.loginWithGoogle}> login with google </button> <button onClick={this.logoutFromGoogle}> logout from google </button> </div> <div className='demo-app-calendar'> <FullCalendar defaultView="dayGridMonth" header={{ left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} ref={this.calendarComponentRef} weekends={this.state.calendarWeekends} events={this.state.calendarEvents} dateClick={this.handleDateClick} /> </div> </div> ) } toggleWeekends = () => { this.setState({ // update a property calendarWeekends: !this.state.calendarWeekends }) } gotoPast = () => { let calendarApi = this.calendarComponentRef.current.getApi() calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object } handleDateClick = (arg) => { if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) { this.setState({ // add new event data calendarEvents: this.state.calendarEvents.concat({ // creates a new array title: 'New Event', start: arg.date, allDay: arg.allDay }) }) } } }
試したこと
- デベロッパーツールを用いたキャッシュの削除
- ディレクトリ位置の確認
あなたの回答
tips
プレビュー