We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render Scheduler in AngularJS with Gulp package?

Follow the below guidelines to run the AngularJS controls using gulp package.

Step 1: Create a new directory and configure the gulp setup for it using command prompt. To create “gulpfile.js”, make use of the below steps.

  1. Install Node. (Node JS)
  2. Install Gulp by using this command “npm install -g gulp”.
  3. Download the required gulp and its plugins to your project by specifying the plugins that you are about to use in “package.json”.

{

"devDependencies": {

  "gulp": "latest",

  "gulp-util": "latest",

  "gulp-sass": "latest",

  "gulp-coffee": "latest",

  "gulp-uglify": "latest",

  "gulp-concat": "latest",

  "gulp-connect": "latest"

  }

}

 

  1. Now execute the command “npm installin command prompt under your project directory, so that the “gulpfile.js will be created.

Step 3: After creating the above files, the “syncfusion-javascript” package needs to be added into package.json file.

{

                "dependencies": {

                “angular”: "latest",

        "syncfusion-javascript": "specify latest version"

                }

}


Step 4: Now create an HTML fileindex.html” and render the needed Syncfusion components within it. For example, the Schedule control initialization is as follows:

<div ng-controller=”ScheduleCtrl”>

 

                <ej-schedule id=”Schedule1” e-width=”100%” e-height=”525px”></ej-schedule>

 

</div>

Step 5: After creating index.html file, the scripts and themes path needs to be referred from the corresponding directory.

  1. The “syncfusion-javascript” packages are available inside the node_modules directory.

Step 6: Finally execute the below commands to run the sample with gulp.

  1. Install npm packages by using this command “npm install”.
  2. Ensure that the Gulp packages are installed in your system and if not installed, use this command “npm install gulp -g”.
  3. Now clean your project directory by using gulp command – “gulp clean”.
  4. Now copy the scripts and theme references by using gulp command – “gulp copy”.
  5. Finally run the “gulp dev” command to run the project.

 

We have prepared the sample in AngularJS with gulp rendering, which can be download from here.

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7734 05/30/2017 05/30/2017 JavaScript ejSchedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon