Click here to Skip to main content
15,609,498 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
Problem 1:
Screenshot 1[^]

Screenshot 2[^]

Any ideas what might be causing it?

Problem 2:

I'm also having issues with datetimepicker not working at modal windows at all.

Screenshot Modal Console[^]

Thanks in advance!

What I have tried:

Since it's MVC project, I've included CSS file in head of _Layout.
Added Moment.js and Datetimepicker.js to section Scripts.

I'm using Bootstrap 3.3.7 and Bootstrap Datetimepicker CSS 4.17.45

Figured out that jQuery requirements for fullcalendar and datetimepicker were colliding.
FullCalendar works on 1.7.2, while DateTimePicker on 3.2.1

    Layout = null;
<!DOCTYPE html>
<html lang="en">
    <title>Datetime and calendar test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap-responsive.min.css" />

    <link href="~/css/fullcalendar.css" rel="stylesheet" />


    <div class="container-fluid">
        <div class="row">
            <div class='col-sm-6'>

                @Html.TextBox("Test", "", new { @class = "form-control", id = "datetimepicker4", type = "text" })

    <div id="fullcalendar"></div>

    <script src="~/Scripts/jquery-1.7.2.js"></script>
    <script>var $Original = jQuery.noConflict(true);</script>
    <script src="~/Scripts/jquery-3.2.1.js"></script>
        var $New = jQuery.noConflict(true);
        $ = $Original;
        jQuery = $Original;
        $.New = $New;

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/js/fullcalendar.min.js"></script>

    <script type="text/javascript">
        $.New(document).ready(function () {
        $(document).ready(function () {

                theme: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listMonth'
                navLinks: true, // can click day/week names to navigate views
                editable: false,
                eventLimit: false, // allow "more" link when too many events

                selectable: false,
                eventClick: function (event, jsEvent, view) {
                    $('#modalUrl').attr('href', event.url2);
                    document.getElementById("eventId").value = event.Id;
                    //$('#eventId').val() = event.Id.val();
                selectHelper: false,
                select: function (start, end) {
                    var title = prompt('Event Title:');
                    var eventData;
                    if (title) {
                        eventData = {
                            title: title,
                            start: start,
                            end: end
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                events: {
                    url: "/Dashboard/GetEvents"





Googled a bit and found out jQuery versions can be sepparated. However I'm getting this error.

Maybe I'm doing something wrong?
Updated 29-Jun-17 1:26am
Zubair SE 29-Jun-17 4:02am    
Hi Friend, i have implemented bootstrap datetimepicker , but added only the three bootstrap.css,jquery_*.js, and bootstrap.js files and it is achieved.
If you have added any separate Datetimepicker.js to achieve it,first remove this and try again. Please share your piece of code, if there is failure.
Faris Karcic 29-Jun-17 5:54am    
Wait do you mean you havent used datetimepicker library at all?
And btw I have figured out what the problem is.
It's cause there's fullcalendar on that page too so jquery is colliding, cause fullcalendar uses 1.7.2 jquery but datetime wont work on that version.

However still nagging to find a solution.
Zubair SE 29-Jun-17 6:48am    
Faris Karcic 29-Jun-17 7:06am    
Well how did you initialize it?
Zubair SE 29-Jun-17 7:08am    
you are needed to share your piece of code please.
Html and the client side script, thanks

1 solution

Since there was problem with jQuery version requirement for both FullCalendar and Datetimepicker.

Full Calendar -> jQuery 1.7.2
DateTimePicker -> jQuery 3.2.1

So I went with best solution I could, found datetimepicker for 1.7.2.

It did the job!
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900