CODEWITHSUNDEEP
javascriptphpdatetimefullcalendarfullcalendar-2
stratos equation
stratos equation

Reputation: 3

Format date events to dd-mm-yyyy in fullcalendar

I have a database, where there dates who are in format like 21-01-2023 but fullcalendar read dates like 2023-01-20.

I would like to read dates events like 21-01-2023 14:55.

I set lang to fr but just change the language not the the format date.

Any advice or tips would be appreciate.

Thanks.

there is example code of what i want to (see the third events example please) the sample code :

<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
  </head>

  <body>
    <h2>Translate FullCalendar v2</h2>
    <center>
    <div id="calendar"></div>
    </center>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

<script>
$(document).ready(function(){
     $('#calendar').fullCalendar({
          lang: 'fr',
                events: [
                        {
                          title: 'All Day Event',
                          start: '2023-01-01'
                        },
                        {
                          title: 'Long Event',
                          start: '2023-01-07',
                          end: '2023-01-10'
                        },
                        {
                          title: 'Long Event in my format date i want',
                          start: '20-01-2023',
                          end: '21-01-2023'
                        },
                ]
      });
});
</script>

  </body>
</html>

Upvotes: 0

Views: 455

Answers (1)

SelVazi
SelVazi

Reputation: 16063

You can do it using moment to parse your dates as follows :

moment("20-01-2023", "DD-MM-YYYY")


$(document).ready(function(){
     $('#calendar').fullCalendar({
          lang: 'fr',
                events: [
                        {
                          title: 'All Day Event',
                          start: '2023-01-01'
                        },
                        {
                          title: 'Long Event',
                          start: '2023-01-07',
                          end: '2023-01-10'
                        },
                        {
                          title: 'Long Event 2',
                          start: moment("20-01-2023", "DD-MM-YYYY"),
                          end: moment('21-01-2023',"DD-MM-YYYY")
                        },
                ]
      });
});
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
  </head>

  <body>
    <h2>Translate FullCalendar v2</h2>
    <center>
    <div id="calendar"></div>
    </center>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

  </body>
</html>

Upvotes: 1

Related Questions