質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

fullcalendarを用いて入力された内容を保存機能

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 142

score 0

打ち消し線### 前提・実現したいこと
fullcalendarとMYSQLを使ってイベントの保存

ここに質問の内容を詳しく書いてください。
データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存機能がわかりません

該当のソースコード

mypage.php

<?php
session_start();
require_once '../classes/UserLogic.php';
require_once '../functions.php';

//ログインしているか判定し、していなければ新規登録画面へ返す

$result = UserLogic::checkLogin();

if(!$result) {
$_SESSION['login_err'] = 'ユーザを登録してログインしてください';
header('Location: signup_form.php');
return;
}

$login_user =$_SESSION['login_user'];

if(isset($_POST['keep'])) {
$keep = $_POST['keep'];
echo $keep;
}

?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!-- 画面解像度により文字サイズを対応(モバイル対応) -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!-- jquery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- fullcalendar CDN -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
<!-- fullcalendar 言語 CDN -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script>
<style>
/* bodyスタイル */
html, body {
overflow: hidden;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
/* カレンダーのヘッダースタイル(年月がある部分) */
.fc-header-toolbar {
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
}
</style>
</head>
<body style="padding:30px;">
<!-- calendarタグ -->
<div id='calendar-container'>
<div id='calendar'></div>
</div>
<script>
(function(){
$(function(){
// calendarエレメント取得
var calendarEl = $('#calendar')[0];
// full-calendar生成する。
var calendar = new FullCalendar.Calendar(calendarEl, {
height: '700px', // calendarの高さ設定
expandRows: true, // 画面に合わせて高さを再設
slotMinTime: '00:00', // Dayカレンダーに開始時間
slotMaxTime: '24:00', // Dayカレンダーに終了時間
// ヘッダーに表示するツールバー
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月)
navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク
editable: true, // 修正可能
selectable: true, // カレンダーのドラッグ設定可能
nowIndicator: true, // 現在時間マーク
dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現)
locale: 'ja', // 日本語設定
eventAdd: function(obj) { // イベントが追加すると発生するイベント
console.log(obj);
},
eventChange: function(obj) { // イベントが修正されたら発生するイベント
console.log(obj);
},
eventRemove: function(obj){ // イベントが削除すると発生するイベント
console.log(obj);
},
select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
}
});
// カレンダーレンダリング
calendar.render();
});
})();
</script>

<form action="keep.php" method="POST">
<input type="submit" name="keep" value="保存">
</form>

<form action="logout.php" method="POST">
<input type="submit" name="logout" value="ログアウト">
</form>

</body>
</html>

keep.php
<?php
session_start();
require_once '../classes/UserLogic.php';

if(isset($_POST['mypage'])) {
$keep = $_POST['mypage'];
echo $mypage;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保存画面</title>
</head>
<body>
<h2>保存完了</h2>
<p>保存しました!</p>
<form action="mypage.php" method="POST">
<input type="submit" name="mypage" value="マイページへ">
</form>
</body>
</html>

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • skys215

    2021/11/21 17:11

    eventAdd: function(obj) { // イベントが追加すると発生するイベント
    console.log(obj);
    },
    ここでajaxを通じてphpにリクエストを送り、MySQLに保存すると思います。

    キャンセル

  • hoge_1111

    2021/11/24 14:54

    できればコードを打っていただけるとありがたいです

    キャンセル

  • hoge_1111

    2021/11/25 13:36

    phpのをmypage.phpに書くとエラーがでます
    どうすればよいですか

    キャンセル

回答 1

0

eventAdd: function(obj) { // イベントが追加すると発生するイベント
  axios.post('/add', obj).then((res) => { alert('OK'); })
},
//...
$data = [
  'name' => $_POST['name'],
  'start_at' => $_POST['start_at'],
  //....他のプロパティ
];
$event = EventLogic::add($data);
return json_encode($event, true);


大雑把に書くとこんな感じです

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 15:06

    イベントの表示と、イベントの登録、イベントの削除それぞれ分けて書く方をお勧めします。

    キャンセル

  • 2021/11/25 15:19

    コード書いてもらえると嬉しいですわからないので

    キャンセル

  • 2021/11/25 18:09

    すみません。そこまではできません。
    主にデータの取得、データの処理、データの結果三つですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る