Bootstrap3 Compatibility #2008

george created 7 years ago

Hi, Does AspNetZero supports Bootstrap3 ?? If yes, how can we use it in the UI? If not, what do we need to do for make it possible??

I tried to implement a calendar which is build using bootstrap3 ([https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=kitchen-sink])). But it is not working.

Hope you will reply soon!

17 Answer(s)

0

ismcagdas created 7 years ago
Support Team

Hi,

AspNet Zero uses Metronic theme and it supports Bootstrap v3.* Do you get a specific error for your calendar implementation ? If so, can you send it.

By the way, Metronic theme already has a calendar in it called fullCalendar. You can also use it if you like. FullCalendar github page: <a class="postlink" href="https://github.com/fullcalendar/fullcalendar">https://github.com/fullcalendar/fullcalendar</a> FullCalendar Metronic sample: <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4_material_design/app_calendar.html">http://keenthemes.com/preview/metronic/ ... endar.html</a>
0

george created 7 years ago

<cite>ismcagdas: </cite>

By the way, Metronic theme already has a calendar in it called fullCalendar. You can also use it if you like. FullCalendar github page: <a class="postlink" href="https://github.com/fullcalendar/fullcalendar">https://github.com/fullcalendar/fullcalendar</a> FullCalendar Metronic sample: <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4_material_design/app_calendar.html">http://keenthemes.com/preview/metronic/ ... endar.html</a>

Hi, that was a useful information. I like the fullCalendar and I'm going to use that. Thank you :D
0

george created 7 years ago

Hi, I tried to implement the fullCalendar by following this documentation [https://fullcalendar.io/docs/usage/]) I've added the fullcalendar.js file to the project and called it in the layout.cshtml along with the script they've given. But its not working. How can we use the fullCalender of Metronic? Do i need to add any of these additional files??
0

ismcagdas created 7 years ago
Support Team

Hi,

Do you have a specific error ? Or is it just nothing happens on your page ?

You can check calendar.js file under "assets\apps\scripts" folder of metronic files. It will give you an idea.

By the way, you also need to add css file for fullCalendar.

george created 7 years ago

Hi, It just nothing happening in my page. But while checking through the browser debug console, I got 2 errors:

1)
Uncaught ReferenceError: jQuery is not defined at http://localhost:6240/libs/fullcalendar/fullcalendar.js:15:11
at http://localhost:6240/libs/fullcalendar/fullcalendar.js:17:3

2)
Uncaught ReferenceError: $ is not defined at http://localhost:6240/Application:72:9

I've downloaded the fullCalendar script files and added those files and the javascript to the project.

<link rel='stylesheet' href='~/libs/fullcalendar/fullcalendar.css'/>       
<script src='~/libs/fullcalendar/fullcalendar.js'></script>
    <script>
        $(document).ready(function () {
            // page is now ready, initialize the calendar...
            $('#calendar22').fullCalendar({
                // put your options and callbacks here
                weekends: false // will hide Saturdays and Sundays
            })

        });
    </script>

I got the above javascript from fullCalendar documentation.

Also, I couldn't find even the "apps" folder inside the metronic files. :| [attachment=0:p2m9qam1]TS.JPG[/attachment:p2m9qam1]

0

ismcagdas created 7 years ago
Support Team

Hi,

The file I mentioned is not included in AspNet Zero, it's in the metronic template files. You can download full metronic template here <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/releases/download/v1.13.0/metronic_v4.7.zip">https://github.com/aspnetzero/aspnet-ze ... c_v4.7.zip</a>.

george created 7 years ago

Hi, Still there is nothing is happening in my page. I'll explain you what I've done in step-by-step:

Added the calendar.js file to my project.
Given the stylesheet reference in <head> of the layout.cshtml

<link href="~/libs/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />

Added a div with id="calendar" in the page which the calendar to be displayed.
Given the script references for the JavaScript files in the footer of the layout.cshtml file

<script src="~/libs/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="~/metronic/assets/apps/scripts/calendar.min.js" type="text/javascript"></script>

But nothing is happening in my page. But I got an error in the browser debug console:

Uncaught TypeError: e.draggable is not a function
 
at l (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:845)
    
at o (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:1047)
    
at Object.initCalendar (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:1234)
    
at Object.init (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:56)
    
at HTMLDocument.<anonymous> (http://localhost:6240/metronic/assets/apps/scripts/calendar.min.js:1:2626)
    
at i (http://localhost:6240/libs/jquery/jquery.min.js:2:27451)
    
at Object.fireWith [as resolveWith] (http://localhost:6240/libs/jquery/jquery.min.js:2:28215)
    
at Function.ready (http://localhost:6240/libs/jquery/jquery.min.js:2:30008)
    
at HTMLDocument.K (http://localhost:6240/libs/jquery/jquery.min.js:2:30370)

Since I'm a fresher to ABP and Angular, please help me to move on.. Thank You.

0

george created 7 years ago

Hi, I hope you guys will provide a very good support to your customers.. :|
0

ismcagdas created 7 years ago
Support Team

Hi,

I have followed the same steps you did and it worked for me. Probably there is some version difference in related libraries.

Can you check the jquery version of your project ? I use jQuery v1.12.1 and jQuery UI - v1.11.2.

I also used FullCalendar v2.4.0. I took it from metronic v4.7 template.
0
george created 7 years ago
Hi, I'm also using the same versions of the libraries you mentioned. But when I replaced the calender.js from metronic v4.7 template, the error which shown in console is gone! :mrgreen: But still nothing is happening on my page :cry:

My .cshtml file contains only the following 3 lines of code:

<div class="col-md-9 col-sm-12"> <div id="calendar" class="has-toolbar fc fc-ltr fc-unthemed"> </div> </div>

Do I need to add any more markups along with that? I think the .js files will take care of that.. is it??

The order of js file links I've given is as follows:

JQuery fullCalender JQuery-UI calendar.js

Can't find what's went wrong! :roll:
0
ismcagdas created 7 years ago
Support Team
Hi,

My scripts are in this order: jQuery jQuery UI FullCalendar Calendar.js

and I used below html for calendar.

<div class="col-md-12"> <div id="calendar"></div> </div>

Can you try it in this way.
0

george created 7 years ago

Hi, No miracles were occurred! :( Don't know why all these happening to me only! :cry: Can you please share the code which you've tried yourself?? You can use the following mail id: <a href="mailto:[email protected]">[email protected]</a>
0

ismcagdas created 7 years ago
Support Team

Hi,

I have sent you the my sample project.
0

george created 7 years ago

Hi, Thank you for your kind support :) But this time also I'm not having any luck :( I've copied the same files from your project, given the calendar div in the dashboard itself and checked each and every lines of stylesheet & js references in layout.cshml. Unfortunately, there is no change :cry: NB: Actually I'm working with the angular project, the project you've shared with me is an MPA. Have you tried the same in angular project? Is there any additional references needed for that??

ismcagdas created 7 years ago

Support Team

Hi,

If you are using Angular project, instead of document ready, you need to use ui-jq So, remove this part of code

<script>
    $(document).ready(function () {
        // page is now ready, initialize the calendar...
        $('#calendar22').fullCalendar({
            // put your options and callbacks here
            weekends: false // will hide Saturdays and Sundays
        })

    });
</script>

and add ui-jq to your calendar div.

<div id="calendar" class="has-toolbar fc fc-ltr fc-unthemed" ui-jq="fullCalendar"> </div>

In angular 1.x apps, you need to use jquery plugins like this. At least this is one of the ways.

0
george created 7 years ago
add ui-jq to your calendar div.

<div id="calendar" class="has-toolbar fc fc-ltr fc-unthemed" ui-jq="fullCalendar"> </div>

OMG!! :o Where were you all these days?!! :twisted: Exactly that was the problem! :mrgreen: ui-jq="fullCalendar" - a short line of code which squeezed me for past few days!

Thank you very much @ismcagdas. Finally the calendar has shown off it's face! Thanks a lot! :lol:
0

ismcagdas created 7 years ago
Support Team

I'm glad that it's solved :)

Have an answer to this question? Log in and write your answer.