Click here to Skip to main content
15,036,441 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

UPDATE:
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">
<head>
    <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" />

</head>

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

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

            </div>
        </div>
    </div>
    <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>
    <script>
        var $New = jQuery.noConflict(true);
        $ = $Original;
        jQuery = $Original;
        $.New = $New;
    </script>

    <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 () {
            $.New('#datetimepicker4').datetimepicker();
        });
    </script>
    <script>
        $(document).ready(function () {

            $('#fullcalendar').fullCalendar({
                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) {
                    $('#modalTitle').html(event.title);
                    $('#modalBody').html(event.description);
                    $('#modalUrl').html(event.url2);
                    $('#modalUrl').attr('href', event.url2);
                    $('#modal-info-event').modal();
                    document.getElementById("eventId").value = event.Id;
                    //$('#eventId').val() = event.Id.val();
                    console.log(document.getElementById("eventId"));
                },
                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
                    }
                    $('#calendar').fullCalendar('unselect');
                },
                events: {
                    url: "/Dashboard/GetEvents"

                }
            });

        });
    </script>

</body>

</html>


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

Maybe I'm doing something wrong?
Posted
Updated 29-Jun-17 1:26am
v5
Comments
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
   
yes
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
Faris Karcic 29-Jun-17 7:27am
   
Updated
Zubair SE 29-Jun-17 7:35am
   
There are two Jquery libs omit one
all seem ok, but datetimepicker function is undefined,
dont remove this code

$.New(document).ready(function () {
$.New('#datetimepicker4').datetimepicker();
});
add its plugin.js file
and also images are missing, follow/download the complete package please.
and remove this plz
var $Original = jQuery.noConflict(true);


var $New = jQuery.noConflict(true);
$ = $Original;
jQuery = $Original;
$.New = $New;
Zubair SE 29-Jun-17 7:31am
   
https://eonasdan.github.io/bootstrap-datetimepicker/
further can go with this, thanks
Zubair SE 29-Jun-17 8:07am
   
@Html.TextBox("Test", "", new { @class = "form-control", id = "datetimepicker4", type = "text" })

$('#datetimepicker4').datetimepicker({timeFormat: 'hh:mm:ss p'});
Faris Karcic 29-Jun-17 8:11am
   
Thanks for help, but still I'd have conflicts between requirements for FullCalendar and DateTimePicker.

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.
Datetimepicker[^]

It did the job!
   

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