Message:

How to scroll down after making an event in calnder (code below), then page scrolls down automatically ? to end of the page or can be even adjust it ?

calender.php

<?php

include("includes/header.php");

include("includes/inavindexdiary.php");

?>



<section>

                <p><a class="button" href="index.php">E T U S I V U</a><a class="button" 

                href="analysointi.php">A N A L Y S O I N T I</a><a class="button" href="calender.php">K A L E N T E R I</a><a class="button" 

                href="profile.php">P R O F I I L I</a><a class="button" href="info.php">I N F O</a>

</section>





<form action="daily-entery.php">

    <button id="Päiväkirjamerkintä" type="submit">Move to kysely sivulla</button>

</form>







<script>



$(document).ready(function () {

    var calendar = $('#calendar').fullCalendar({

        editable: true,

        events: "fetch-event.php",

        displayEventTime: false,

        eventRender: function (event, element, view) {

            if (event.allDay === 'true') {

                event.allDay = true;

            } else {

                event.allDay = false;

            }



        },

        selectable: true,

        selectHelper: true,

        select: function (start, end, allDay) {

            var title = prompt('Event Title:');



            if (title) {

                var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");

                var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");



                $.ajax({

                    url: 'add-event.php',

                    data: 'title=' + title + '&start=' + start + '&end=' + end,

                    type: "POST",

                    success: function (data) {

                        displayMessage("Added Successfully");

                        console.log("Added Successfully" + '  '+ title+'  '+ start+'  '+ end+'  ');

                    }

                });

                calendar.fullCalendar('renderEvent',

                        {

                            title: title,

                            start: start,

                            end: end,

                            allDay: allDay

                        },

                true

                        );

            }

            calendar.fullCalendar('unselect');

        },

        

        editable: true,

        eventDrop: function (event, delta) {

                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");

                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");

                    $.ajax({

                        url: 'edit-event.php',

                        data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,

                        type: "POST",

                        success: function (response) {

                            displayMessage("Updated Successfully");

                        }

                    });

                },

        eventClick: function (event) {

            var deleteMsg = confirm("Do you really want to delete?");

            if (deleteMsg) {

                $.ajax({

                    type: "POST",

                    url: "delete-event.php",

                    data: "id=" + event.id,

                    success: function (response) {

                        //if(parseInt(response) > 0) {

                            $('#calendar').fullCalendar('removeEvents', event.id);

                            displayMessage("Deleted Successfully");



                        //}

                    }

                });

            }

        }



    });

});



function displayMessage(message) {

        $(".response").html("<div class='success'>"+message+"</div>");

    setInterval(function() { $(".success").fadeOut(); }, 1000);

}

</script>







    <div class="response"></div>

    <div id='calendar'></div>



    <div class="slogancontainer">

    

    <hr>

        <article>   

        <p class="slogan">"Love your heart, it loves you" </p>

        </article>

    </div>



  <?php

  include("includes/footer.php")

  ?>

add-event.php where i add the events :

<?php session_start(); ?>

<?php



require_once "db.php";



$title = isset($_POST['title']) ? $_POST['title'] : "";

$start = isset($_POST['start']) ? $_POST['start'] : "";

$end = isset($_POST['end']) ? $_POST['end'] : "";





//kirjautuneen käyttäjän userID?

$data2['email'] = $_SESSION['semail'];

//var_dump($data1);

$sql1 = "SELECT id FROM otium where email =  :email";

$kysely1 = $DBH->prepare($sql1);

$kysely1->execute($data2);

$tulos1 = $kysely1->fetch();



$data1['userID'] = $tulos1[0];



try {

    //Tiedot kantaan

    var_dump($_POST);



    $data1['title'] = $_POST['title'];

    $data1['start'] = $_POST['start'];

    $data1['end'] = $_POST['end'];



    $STH = $DBH->prepare("INSERT INTO tbl_events (title, start, end, userID) VALUES (:title, :start, :end, :userID);");

    $STH->execute($data1);



    $data4['userID'] = $data1['userID'];

    $sql4 = "SELECT start FROM tbl_events where userID =:userID ORDER BY start DESC LIMIT 10";



    $kysely4 = $DBH->prepare($sql4);

    $kysely4->execute($data4);

    $tulos2 = $kysely4->fetch();



    $_SESSION["startDate"] = $tulos2[0];

    $_SESSION['startDatelomake'] = $_POST['start'];



    file_put_contents('log/DBErrors.txt', 'Päiväys:' . $_SESSION["startDate"], FILE_APPEND);



    file_put_contents('log/DBErrors.txt', "\n Merkintä hhhhhhhh on:"  . $title . "  " . $start . "  " . $end . "  " . ' id ' . $data1['userID'] . ' email ' . $_SESSION['semail'], FILE_APPEND);

    if (!$result) {

        $result = mysqli_error($DBH);

    }

} catch (PDOException $e) {

    echo "Yhteysvirhe: " . $e->getMessage();

    file_put_contents('log/DBErrors.txt', 'Connection: ' . $e->getMessage() . "\n", FILE_APPEND);

}



?>

So after adding an event i would be scrolled down automatically, reaason why there is an form to be to be filled and submitted.

---

My Answer:
Yes, it is possible to automatically scroll down the page after making an event in the calendar using JavaScript. You can achieve this by adding a script to the page that will scroll the page down after the event creation action is completed.

Here is an example of how you can achieve this:

html

Calendar

In the above code, the `window.scrollTo(0, document.body.scrollHeight);` function is used to scroll the page down to the bottom after the calendar event is created. You can adjust the scroll position by changing the `0` and `document.body.scrollHeight` values in the `scrollTo` function.

You can add this script to your `calender.php` file after the event creation action is completed to automatically scroll down the page.