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
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
<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
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
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.
-
0
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.
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
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>. -
0
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
-
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
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. (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
Hi,
I hope you guys will provide a very good support to your customers.. :| -
0
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
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:
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.jsCan't find what's went wrong! :roll:
-
0
Hi,
My scripts are in this order:
jQuery
jQuery UI
FullCalendar
Calendar.jsand I used below html for calendar.
Can you try it in this way.
-
0
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:sayas@topscoresoftwares.com">sayas@topscoresoftwares.com</a> -
0
Hi,
I have sent you the my sample project.
-
0
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?? -
0
Hi,
If you are using Angular project, instead of document ready, you need to use ui-jq
So, remove this part of codeand add ui-jq to your calendar div.
In angular 1.x apps, you need to use jquery plugins like this.
At least this is one of the ways. -
0
add ui-jq to your calendar 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
I'm glad that it's solved :)