編集履歴

質問編集履歴

画像が反映されない

2022/01/12 08:20

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -348,7 +348,7 @@
 ```
-![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/962c0110-8f10-44d8-b6a6-62762277eb4b.png)
+![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/b88ee2f6-c48e-4d4c-be3d-6121d996cc7f.png)
 ### 補足情報（FW/ツールのバージョンなど）
 VScode

JavaScript React.js

画像の更新

2022/01/12 07:31

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -345,7 +345,7 @@
     return i;
   };
 }
+```
 ![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/962c0110-8f10-44d8-b6a6-62762277eb4b.png)

JavaScript React.js

画像の更新

2022/01/12 07:30

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -346,9 +346,9 @@
   };
 }
 ![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/962c0110-8f10-44d8-b6a6-62762277eb4b.png)
-```
 ### 補足情報（FW/ツールのバージョンなど）
 VScode

JavaScript React.js

画像の更新

2022/01/12 07:29

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -346,10 +346,9 @@
   };
 }
+![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/962c0110-8f10-44d8-b6a6-62762277eb4b.png)
 ```
-![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/381330fa-6a36-4749-a0ce-e3b9c2448d21.png)
 ### 補足情報（FW/ツールのバージョンなど）
 VScode

JavaScript React.js

2022/01/12 07:28

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,717 +1,356 @@
 ### 前提・実現したいこと
 create-react-appを使ってカレンダーアプリを作っています。カレンダーの表示や予定の登録削除はできるのですが、日付を範囲選択した際に出てほしい予定の登録の画面が常に表示されてしまいます。エラーなどは特にでていないのですがなぜこうなるかわかりません。ご助言お願いします
 ```ここに言語を入力
   render() {
-    return (
+    return (
       <div>
         {this.renderCover()}
         {this.renderForm()}
         <div className="container">
           <FullCalendar
             locale="ja"
             defaultView="timeGridWeek"
             slotDuration="00:30:00"
             selectable={true}
             allDaySlot={false}
             // navLinks={true}
             titleFormat={{
               year: "numeric",
               month: "short",
               day: "numeric",
             }}
             header={{
               start: 'title',
               center: 'prev, next, today',
               end: 'dayGridMonth,timeGridWeek,'
             }}
             businessHours={{
               daysOfWeek: [1, 2, 3, 4, 5],
               startTime: "0:00",
               endTime: "24:00",
             }}
             plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
             ref={this.ref}
             weekends={true}
             events={this.myEvents}
             eventClick={this.handleClick}
             select={this.handleSelect}
             eventMouseEnter={this.handleMouseEnt}
             eventMouseLeave={this.handleMouseLev}
             eventDragStart={this.handleDragStart}
             eventDrop={this.handleDrop}
             eventResize={this.handleResize}
             dateClick={this.handledateClick}
             eventRender={this.handleRender}
           />
         </div>
       </div>
-    );
+    );
-  }
+  }
   handleSelect = (selectInfo) => {
     let start = new Date(selectInfo.start);
     let end = new Date(selectInfo.end);
     start.setHours(start.getHours());
     end.setHours(end.getHours());
     this.setState({ inputTitle: "" });
     this.setState({ inputMemo: "" });
     this.setState({ isInputTitle: false });
     this.setState({ inputStart: start });
     this.setState({ inputEnd: end });
     this.setState({ isChange: false });
     this.setState({ formInview: true });
-  };
+  };
   handleClick = (info) => {
     this.selEventID = info.event.id;
     const selEvent = this.myEvents[info.event.id];
     const title = selEvent.title;
     const memo = selEvent.memo;
     const start = new Date(selEvent.start);
     const end = new Date(selEvent.end);
     this.setState({ inputTitle: title });
     this.setState({ inputMemo: memo });
     this.setState({ isInputTitle: true });
     this.setState({ inputStart: start });
     this.setState({ inputEnd: end });
     this.setState({ isChange: true });
     this.setState({ formInview: true });
-  };
+  };
   renderCover() {
-    return (
+    return (
       <div
         onClick={() => {
           this.setState({ formInview: false });
         }}
         className={
           this.state.formInview
             ? "container__cover inview"
             : "container__cover "
         }
       ></div>
-    );
+    );
-  }
+  }
   renderForm() {
-    return (
+    return (
       <div
         className={
           this.state.formInview ? "container__form inview" : "container__form"
         }
       >
         <form>
           {this.state.isChange === false ? (
             <div className="container__form__header">予定を入力</div>
           ) : (
             <div className="container__form__header">予定を変更</div>
           )}
           <div>{this.renderTitle()}</div>
           <div>{this.renderStartTime()}</div>
           <div>{this.renderEndTime()}</div>
           <div>{this.renderMemo()}</div>
           <div>{this.renderBtn()}</div>
         </form>
       </div>
-    );
+    );
-  }
+  }
   renderTitle() {
-    return (
+    return (
       <React.Fragment>
         <p className="container__form__label">タイトル</p>
         <input
           className="container__form__title"
           type="text"
           value={this.state.inputTitle}
           onChange={(e) => {
             this.setState({ inputTitle: e.target.value });
             if (e.target.value === "") {
               this.setState({ isInputTitle: false });
             } else {
               this.setState({ isInputTitle: true });
             }
           }}
         />
       </React.Fragment>
-    );
+    );
-  }
+  }
   renderMemo() {
-    return (
+    return (
       <React.Fragment>
         <p className="container__form__label">メモ</p>
         <textarea
           className="container__form__memo"
           rows="3"
           value={this.state.inputMemo}
           onChange={(e) => {
             this.setState({ inputMemo: e.target.value });
           }}
         />
       </React.Fragment>
-    );
+    );
-  }
+  }
   renderStartTime() {
-    return (
+    return (
       <React.Fragment>
         <p className="container__form__label">開始日時</p>
         <DatePicker
           className="container__form__datetime"
           locale="ja"
           dateFormat="yyyy/MM/d HH:mm"
           selected={this.state.inputStart}
           showTimeSelect
           timeFormat="HH:mm"
           timeIntervals={15}
           todayButton="today"
           onChange={(time) => {
             this.setState({ inputStart: time });
           }}
         />
       </React.Fragment>
-    );
+    );
-  }
+  }
   renderEndTime() {
-    return (
+    return (
       <React.Fragment>
         <p className="container__form__label">終了日時</p>
         <DatePicker
           className="container__form__datetime"
           locale="ja"
           dateFormat="yyyy/MM/d HH:mm"
           selected={this.state.inputEnd}
           showTimeSelect
           timeFormat="HH:mm"
           timeIntervals={10}
           todayButton="today"
           onChange={(time) => {
             this.setState({ inputEnd: time });
           }}
         />
       </React.Fragment>
-    );
+    );
-  }
+  }
   renderBtn() {
-    return (
+    return (
       <div>
         {this.state.isChange === false ? (
           <div>
             <input
               className="container__form__btn_cancel"
               type="button"
               value="キャンセル"
               onClick={() => {
                 this.setState({ formInview: false });
               }}
             />
             <input
               className="container__form__btn_save"
               type="button"
               value="保存"
               disabled={!this.state.isInputTitle}
               onClick={this.onAddEvent}
             />
           </div>
         ) : (
           <div>
             <input
               className="container__form__btn_delete"
               type="button"
               value="削除"
               onClick={this.onDeleteEvent}
             />
             <input
               className="container__form__btn_save"
               type="button"
               value="変更"
               onClick={this.onChangeEvent}
             />
           </div>
         )}
       </div>
-    );
+    );
-  }
+  }
   getdoubleDigestNumer(number) {
     return ("0" + number).slice(-2);
-  }
+  }
   changeDateToString(dt) {
     const year = dt.getFullYear();
     const month = this.getdoubleDigestNumer(dt.getMonth() + 1);
     const date = this.getdoubleDigestNumer(dt.getDate());
     const hour = this.getdoubleDigestNumer(dt.getHours());
     const minutes = this.getdoubleDigestNumer(dt.getMinutes());
     const retDate = `${year}-${month}-${date} ${hour}:${minutes}:00`;
     return retDate;
-  }
+  }
   onAddEvent() {
     const starttime = this.changeDateToString(this.state.inputStart);
     const endtime = this.changeDateToString(this.state.inputEnd);
     if (starttime >= endtime) {
       alert("開始時間と終了時間を確認してください。");
       return;
-    }
+    }
     const event = {
       title: this.state.inputTitle,
       memo: this.state.inputMemo,
       start: starttime,
       end: endtime,
     };
     if (this.addEvent(event) === true) {
       window.alert("設定しました");
       this.setState({ formInview: false });
-    }
+    }
-  }
+  }
   onChangeEvent(values) {
     if (window.confirm("変更しますか？")) {
       const starttime = this.changeDateToString(this.state.inputStart);
       const endtime = this.changeDateToString(this.state.inputEnd);
       if (starttime >= endtime) {
         alert("開始時間と終了時間を確認してください。");
         return;
       }
       const event = {
         title: this.state.inputTitle,
         memo: this.state.inputMemo,
         start: starttime,
         end: endtime,
         id: this.selEventID,
       };
       if (this.changeEvent(event) === true) {
         window.alert("イベントを変更しました。");
         this.setState({ formInview: false });
       }
     } else {
       return;
-    }
+    }
-  }
+  }
   onDeleteEvent(values) {
     if (window.confirm("削除しますか？")) {
       if (this.selEventID < this.EVENT_SEL_NON) {
         let EventID = this.selEventID;
         let delevent = this.ref.current.getApi().getEventById(EventID);
         delevent.remove();
         this.selEventID = this.EVENT_SEL_NON;
         this.myEvents[EventID].isDel = true;
       }
       this.setState({ formInview: false });
       alert("イベントを削除しました。");
     } else {
       return;
-    }
+    }
-  }
+  }
   addEvent = (ev, col) => {
     ev.id = this.getID();
     this.myEvents.push(ev);
     this.ref.current.getApi().addEvent(ev);
     return true;
-  };
+  };
   changeEvent = (ev, col = "red") => {
     this.myEvents[ev.id].title = ev.title;
     this.myEvents[ev.id].memo = ev.memo;
     this.myEvents[ev.id].start = ev.start;
     this.myEvents[ev.id].end = ev.end;
     this.ref.current.getApi().getEventById(ev.id).remove();
     this.ref.current.getApi().addEvent(this.myEvents[ev.id]);
     return true;
-  };
+  };
   sortEventID = (a, b) => {
     return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
-  };
+  };
   getID = () => {
     this.myEvents.sort(this.sortEventID);
     let i;
     for (i = 0; i < this.myEvents.length; i++) {
       if (this.myEvents[i].id !== i) {
         break;
       }
-    }
+    }
     return i;
-  };
+  };
 }
 ```
-![イメージ説明](e918a4e9d1fe72ed0feb7ac3915f05ac.png)
+![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/381330fa-6a36-4749-a0ce-e3b9c2448d21.png)
 ### 補足情報（FW/ツールのバージョンなど）
 VScode
 create-react-app

JavaScript React.js

React.jsのタグを追加しました。

2022/01/11 14:34

投稿

syobon_gun

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes